Jump to content

function fadeOut not working on first click


JKG

Recommended Posts

im having a bit of a problem with the below code.

 

this is the html

<div class="info-box">1) Charity Name<span onclick="close_box('123,')" class="close">x</span></div>

this is the js

<script>
function close_box(id){
$('span.close').click(function() {
	$(this).parent().fadeOut(400);	
  		$.post("<?php echo $html_dir . $scripts_dir . 'ajax/contact_ids_delete.php'; ?>",{idsToDelete:id});	
  		delete id;		   
});
}
</script>

 

clicking the x does post to the ajax, but does the first time you click it the fadeOut does not work, after the first click it works everytime!

its also being a bit temperamental with the ajax post, has anyone got any ideas as to why this might be, im not great with jQuery.

 

thanks,

joe

Link to comment
Share on other sites

You are binding the click event handler twice: inline with the onclick attribute and in the onclicks function close_box. That's a no no. It's doubling up and getting confused.

You can have one or the other. You can pass this from the onclick attribute, or just define an ID attribute with the ID to delete then grab it with the jQuery event.

Link to comment
Share on other sites

thank you so much for that Jaysonic.

 

this isnt working, how do i bind without using click()?

 

thanks again.

 

<script>
function close_box(id){
$('span.close').function() {
	$(this).parent().fadeOut(400);	
  		$.post("<?php echo $html_dir . $scripts_dir . 'ajax/contact_ids_delete.php'; ?>",{idsToDelete:id});	
  		delete id;		   
};
}
</script>

Link to comment
Share on other sites

thanks for your help.

 

i really don't know jQuery. Im struggling to get even this to work:

 

$(document).ready(function(){
$('span.close').click(function() {
	$(this).parent().fadeOut(400);					   
});
}

 

and thats not even thinking about the ajax line, how would i pass the variable through the ID, does id="" except comma's?

 

thanks!!

 

EDIT:

this doesnt work either...

$(document).ready(function(){
$('span.close').bind('click', function() {
  $(this).parent().fadeOut(400);
});
}

EDIT:

this does work, if placed after the html

    $("span.close").click(function () { 
       $(this).parent().fadeOut(400);
    });

 

so, how can i carry the value to the ajax line?

 

thanks!

Link to comment
Share on other sites

EDIT:

this works, is it written correctly? thanks.

    $("span.close").click(function () { 
       $(this).parent().fadeOut(400);
       var id = $(this).attr("id");
       $.post("<?php echo $html_dir . $scripts_dir . 'ajax/contact_ids_delete.php'; ?>",{idsToDelete:id});
    });

 

Link to comment
Share on other sites

Hi,

 

Just to give you an alternative method using a function.

 

function close_box(id)
{
   $(event.target).parent().fadeOut(400);
   $.post("<?php echo $html_dir . $scripts_dir . 'ajax/contact_ids_delete.php'; ?>",{idsToDelete:id});
}

 

 

Then within the tag your clicking to activate this function run an onClick event

<tag onClick="close_box(id);" />

 

using $(event.target) you are binding to the targeted tag which contains the event triggering the function.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.