Question

我有以下代码（简化以查看背后的逻辑）：

<div id="alfa">Text
    <script>
        $("#alfa").click(function() {
            alert($(this).attr("id"));
        });
    </script>
</div>
<script>
    var clone = $("#alfa").clone().attr("id",$("#alfa").attr("id")+"_1");
    $("#alfa").after(clone);
</script>

当我点击克隆文本时，我需要看到“alfa_1”，但没有任何反应。

当我使用clone（true，true）时，但是我没有在Firebug中看到克隆div的代码，看看到底发生了什么。

此外，我不知道为什么单击原始div警报会被触发两次。

感谢。

Answer 1

当我点击克隆文本时，我需要看到“alfa_1”，但没有任何反应。

对<script>元素进行DOM或innerHTML操作在浏览器中是不一致的，并且在JavaScript执行周期方面没有任何意义。在所有情况下都要避免使用它。

如果要将DOM元素与其jQuery事件处理程序一起复制，请使用clone(true)：

<div id="alfa">Text</div>

<script type="text/javascript">
    $('#alfa').click(function() {
        alert(this.id);
    });
    var clone= $('#alfa').clone(true);
    clone[0].id+= '_1'; // sorry, I couldn't bring myself to do this the jQuery way
    $('#alfa').after(clone);
</script>

Answer 2

原始div的警报被触发两次，因为脚本是在div内定义的。将脚本移出div，它应该按预期工作：

<div id="alfa">Text</div>
<script>
    $("#alfa").click(function() {
        alert($(this).attr("id"));
    });
</script>

如何使用jQuery </script>克隆<script>标记

2 个答案: