0

在一个测试网页上，我正在自学 javascript 和 jquery 以及很快的 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>

4

4 回答 4

3

您需要使用事件委托

$(document).ready(function(){
    //save entry script
    $(document).on('click', ".save_entry", function(){
    alert("Hello World");
    });
});
于 2013-08-20T17:11:04.460 回答
2

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

$(document).on('click', '.save_entry', function(){
    alert("Hello World");
});
于 2013-08-20T17:12:16.400 回答
1

由于您使用的是生成的内容，请使用.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>
于 2013-08-20T17:13:01.533 回答
1

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

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

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

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

代替：

$(".save_entry").click(function () {
   alert("Hello World");
});
于 2013-08-20T17:22:06.317 回答