JQuery Code not working after Ajax load

Question

Recently i wrote a JQuery skript (toggle) which is working for me:

  $("input[id^='show_Fulltext']").click(function(){
   $("#Fulltext".concat($(this).val())).toggle('Drop');
  });

Here is the surrounding HTML code (mixed with ruby):

<%= @final[0..175]%><div id="Fulltext<%=@count%>" style="display:none;"><%=@final[[email protected]]%></div>
    <% if @final.length > 176 %>
    <a><input type="image" src="" alt="[...]"  value='<%=@count%>' id='show_Fulltext<%= @count%>'></input></a>
    <% end %>

I shortly explain what it does. If the text in the ruby variable @final is larger then 175 all superflous text is put into a div wth the ID FulltextX. FulltextX is a running number, since there are multiple of these fields and i do not want to have the same ID.

Ok so far so good - everything works. Now i have multiple of those divs with ids Fulltext1,Fulltext2,Fulltext3 etc.. And i can toggle each of them if they have more characters than 175. Works perfectly.

Now my problem: I can change which of these texts are shown. This is also done in JQuery. Well - now the problem is. After i change the page my Toggle function does not work anymore.

I found a very good Blog explaining how i could fix it: http://blog.codebusters.pl/en/click-doesn-t-work-after-ajax-load-jquery/

I guess this is exactly the thing i should do to fix the issue. Unfortunately at the moment i am really stuck adapting my code to the given example in the just mentioned blog.

Any help adapting my code to the shown code is apreciated. I think after the adaption the toggle should work even after the page changes.

Bhushan Kawadkar · Accepted Answer · 2015-08-24 12:31:28Z

4

You are registering click handlers for elements which are already there but dynamically created (may be using ajax call) elements will not get this click handler.

You need to register click event handler for dynamically generated elements using .on() as shown in below code

$(document).on("click", "input[id^='show_Fulltext']", function(){
   $("#Fulltext".concat($(this).val())).toggle('Drop');
 });

Above code will work for dynamically added as well as on page load created elements.

answered Aug 24, 2015 at 12:31

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

JQuery Code not working after Ajax load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related