Jquery click trigger doesnt work

Question

I have this function:

$(".action").click(function(){            
$.get('suppliers/template/get_options_list.php?action='+action+'&id='+id+'&optvalue='+optvalue+'&pid='+pid+'',
update_options);        
    }    
});    
function update_options(options){
$('#selectedoptions').html(options);    
}

It works fine for the first click trigger but after ajax returns results next click doesnt fire.. No errors, console is clear but stilll

What could cause this? Thanks

If .action element is inside #selectedoptions element, it is either doesn't exist after replacing html or it is replaced with same one, and then it is time to use delegated event handler $('#selectedoptions').on('click', ".action", function() { — Regent
– Regent, Commented Dec 12, 2014 at 19:15
Does update_options update the HTML that contains .action elements? If so, you'll need to delegate your click event. Hah, yeah, what Regent said. — showdev
– showdev, Commented Dec 12, 2014 at 19:16
It looks like you have an extra } in your click function. Is this code even running? — Mike Cluck
– Mike Cluck, Commented Dec 12, 2014 at 19:16
Yes, the returned element .action is in #selectedoptions but why this is a reson not to fire? — Europeuser
– Europeuser, Commented Dec 12, 2014 at 19:17
@Europeuser question about binding event handlers to dynamically created elements is asked many times every day. — Regent
– Regent, Commented Dec 12, 2014 at 19:19

Mohamed-Yousef · Accepted Answer · 2014-12-12 19:16:46Z

1

$(document).on('click','.action',function(){
$.get('suppliers/template/get_options_list.php?action='+action+'&id='+id+'&optvalue='+optvalue+'&pid='+pid+'',
update_options);      
});    
function update_options(options){
$('#selectedoptions').html(options);
}

and if .action if a submit input use

$(document).on('submit','your_form_ID_or_Class',function()

answered Dec 12, 2014 at 19:16

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

showdev Over a year ago

A little explanation would be helpful. Also, "action" is a class and not an ID.

Europeuser Over a year ago

yes, mate, it is a class, group of elements that fire , and as I said the first trigger works fine and after the ajax returns the html which consists the same .action elements but they dont fire..

Mohamed-Yousef Over a year ago

@showdev thanks :) I updating my answer while you post your comment .. but I'm very slow English typing :)

harshes53 Over a year ago

FYI.. you can bind multiple events using on event listener e.g: $(document).on('click submit','your_form_ID_or_Class',function()

shawnbro · Accepted Answer · 2014-12-12 19:17:41Z

1

Try binding the click event to the body, rather than the specific element, which won't be bound anymore once you replace the html:

    $("body").on("click", ".action", function(){            
      $.get('suppliers/template/get_options_list.php?action='+action+'&id='+id+'&optvalue='+optvalue+'&pid='+pid+'',
update_options);        
    }    
});    
function update_options(options){
$('#selectedoptions').html(options);    
}

answered Dec 12, 2014 at 19:17

shawnbro

1459 bronze badges

Comments

Europeuser · Accepted Answer · 2014-12-12 19:42:24Z

0

I removed the ajax returned html and instead of it on ajax response I used .remove() function to remove elements instead of generating new html.. Thank you for your help guys ! This isnt the original solution but it works fine..

answered Dec 12, 2014 at 19:42

Europeuser

9421 gold badge10 silver badges35 bronze badges

Collectives™ on Stack Overflow

Jquery click trigger doesnt work

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related