CODEWITHSUNDEEP
jquery
Mason
Mason

Reputation: 139

jquery added content not working

On a test webpage where I'm teaching myself javascript and the jquery & soon ajax libraries. I've got the table which is shown down below with an edit image button. When that image is clicked the text to its left is successfully taken and copied to an input box which is put in its place. However, the save image button which is put in place of the edit image button doesn't work, not even a simple alert. This can be seen at http://jsfiddle.net/DVcFU/2/

I'm a beginner with javascript as you might guess, so I'm not exactly sure where I've gone wrong or what to do next. I'm guessing I have to do some sort of initialization of the element. Any help is appreciated.

I'm using jquery-1.10.2 

<script src="../java/jquery-1.10.2.js"></script>

Javascrip Edit Function

<script>
$(document).ready(function(){
    //edit entry script
    $(".edit_entry").click(function(){
            //gets the text from the textbox
            var text  = $(this).parent().prev().text();

            //replaces the textbox and edit button with an input box and save button
            var html_code1 = "<input id='editing' type='text' value='" + text + "'>";
            var html_code2 = "<td><img src='/img/saveicon.png' class='save_entry' style='display:inline; cursor:pointer' border='0' alt='Save Entry'></td>";
            $(this).parent().prev().replaceWith(html_code1);
            $(this).parent().html(html_code2);
    });
});
</script>

Javascript Save Function

<script>
$(document).ready(function(){
    //save entry script
    $(".save_entry").click(function(){
    alert("Hello World");
    });
});
</script>

HTML

<table>
    <tr>
        <td><a href='www.google.com'>Generic link</a></td>
        <td>Date</td>
        <td>Time</td>
        <td>Details</td>
        <td><img src="/img/editicon.png" class="edit_entry" style="display:inline; cursor:pointer" border="0" alt="Edit Entry"></td>
    </tr>
</table>

Upvotes: 0

Views: 57

Answers (4)

tormex
tormex

Reputation: 127

If You want to add an event in a dynamic way in jQuery, then in my experience the simplest thing is to use the .on() method.

Compared to Your example the method has only some very simple differences.

Your code should look like this in order to reach Your goal: 

$(document).on("click", ".save_entry", function () {
   alert("Hello World");
});

instead of:

$(".save_entry").click(function () {
   alert("Hello World");
});

Upvotes: 1

Patrick Evans
Patrick Evans

Reputation: 42736

Since you are using generated content use .on, which will bind the events to current and newly generated content

<script>
$(document).ready(function(){
    //edit entry script
    $(document).on("click",".edit_entry",function(){
            //gets the text from the textbox
            var text  = $(this).parent().prev().text();

            //replaces the textbox and edit button with an input box and save button
            var html_code1 = "<input id='editing' type='text' value='" + text + "'>";
            var html_code2 = "<td><img src='/img/saveicon.png' class='save_entry' style='display:inline; cursor:pointer' border='0' alt='Save Entry'></td>";
            $(this).parent().prev().replaceWith(html_code1);
            $(this).parent().html(html_code2);
    });

    $(document).on("click",".save_entry",function(){
            alert("Hello World");
    });
});
</script>

Upvotes: 1

gen_Eric
gen_Eric

Reputation: 227240

$(".save_entry").click() only binds the event to elements that exist at the point when that line is ran. You need to use a "delegated" event for elements added later on.

$(document).on('click', '.save_entry', function(){
    alert("Hello World");
});

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You need to use event delegation

$(document).ready(function(){
    //save entry script
    $(document).on('click', ".save_entry", function(){
    alert("Hello World");
    });
});

Upvotes: 3

Related Questions