Question

在测试网页上我自学javascript和jquery＆amp;很快ajax图书馆。我有一张下面带有编辑图像按钮的桌子。单击该图像时，将成功获取其左侧的文本并将其复制到放置在其位置的输入框中。但是，用于代替编辑图像按钮的保存图像按钮不起作用，甚至不是简单的警报。这可以在http://jsfiddle.net/DVcFU/2/

看到

我是一个初学javascript，你可能会猜到，所以我不确定我哪里出错或下一步做什么。我猜我必须对元素进行某种初始化。任何帮助表示赞赏。

我正在使用jquery-1.10.2

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

Javascrip编辑功能

<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保存功能

<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>

Answer 1

您需要使用事件委派

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

Answer 2

$(".save_entry").click()仅将事件绑定到运行该行时存在的元素。您需要为稍后添加的元素使用“委托”事件。

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

Answer 3

由于您使用的是生成内容，因此请使用.on将事件绑定到当前和新生成的内容

<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>

Answer 4

如果您想在jQuery中以动态方式添加事件，那么根据我的经验，最简单的方法是使用.on()方法。

与您的示例相比，该方法只有一些非常简单的差异。

为了达到您的目标，您的代码应如下所示：

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

而不是：

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

jquery添加的内容不起作用

4 个答案: