I am loading elements into a div container using Ajax / Request. By default I'm hiding an input box. If a user clicks an edit icon on that div, I want to show the input box. Here is my code:

HTML CODE

    <div class='container'>
      <input type = 'text' onkeydown='saveFn(event,this)' name = 'editemail' class = 'editemail' style='display:none;     height:20px;' />
    </div>

JS CODE

 $(".container").click(function(){
      console.log($(this).find(".editemail").show()); //Note it works fine If i didn't load any new elements into the div.
 });

Console Log Output before loading new element into the container.

   <input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; " value="[email protected]" title="press enter to save">

Console Log Output after loading an element into the container.

<input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; display: none; " value="[email protected]" title="press enter to save">

Even though I am also tried to remove the "style" attribute from this element and adding a new style element, it still doesn't work.

I am loading elements into a div container using Ajax / Request. By default I'm hiding an input box. If a user clicks an edit icon on that div, I want to show the input box. Here is my code:

HTML CODE

    <div class='container'>
      <input type = 'text' onkeydown='saveFn(event,this)' name = 'editemail' class = 'editemail' style='display:none;     height:20px;' />
    </div>

JS CODE

 $(".container").click(function(){
      console.log($(this).find(".editemail").show()); //Note it works fine If i didn't load any new elements into the div.
 });

Console Log Output before loading new element into the container.

   <input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; " value="[email protected]" title="press enter to save">

Console Log Output after loading an element into the container.

<input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; display: none; " value="[email protected]" title="press enter to save">

Even though I am also tried to remove the "style" attribute from this element and adding a new style element, it still doesn't work.

• javascript
• jquery
• jquery-events

4 Answers 4

First you should read the jQuery Docs FAQ section: Why_do_my_events_stop_working_after_an_AJAX_request

Use on() to delegate the handler for future elements

$(document).on('click', ".container", function(){
/* your code*/
})

Try this instead:

$(document).on('click','.container',function(){

http://api.jquery./on/

Try this one instead:

$('.container').live('click', function(){
     /* Your Code Here */
});

The problem is that the click() bound is getting lost after an ajax request. In JQuery you can use .live() function to get this working however this function is now deprecated and they encourage you to use .on() or .delegate(). Personally i've have tons of headecks using .on() and .delegate() and rather use the plugin livequery. With livequery plugin is as simple as:

 $(function(){

    $('#elementId').livequery('click',function(){
       //do something on click
    }) 
 });

For more information go to: .livequery() .on() .delegate()