function fadeOut not working on first click

[JKG]

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

[JasonLewis]

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.

[JKG]

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>

[trq]

You should remove the onClick from your markup and leave the binding to jQuery.

[JasonLewis]

Like thorpe said, you can bind events just with jQuery. You can determine when the DOM is ready with something like:

 

$(document).ready(function(){
    // Bind the event in here.
});

[JKG]

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!

[trq]

Your missing the closing );

 

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

[JKG]

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});
    });

 

[trq]

Looks fine.

[Torniquet]

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.

[JKG]

thanks for your help guys, all sorted