JQuery -.trigger () does not work after .load ()

This is my code:

function refresh () { sub_tab=$("#hid").val(); $("#content").load(cur_tab+'.php',function () { alert(sub_tab); $("#pd").trigger('click'); }); } 

String $("#pd").trigger('click'); doesn't seem to work. However, if I execute this line as a standalone operation (without load ), it works.
#pd is a <div> that is loaded on the page that contains the above script.
Any ideas?

#pd is inside another PHP page that loads in #content, Now when I press #pd it works fine, just this trigger event doesn't work when I reload the PHP file in #content

+4
source share
1 answer

If the click event is bound to #pd and #pd is inside #content , you lose the binding each time you reload the content, because #pd destroyed and recreated.

Try using delegate to bind the event - it plays much nicer with Ajax calls and dynamic DOM:

 $("#content").delegate("#pd", "click", function(){ // click event }); 

Later, when you select $("#pd").trigger('click'); , you will see the expected results.

+1
source

All Articles