如何使用 jquery 在链式反应中附加 DOM

Posted 2023-05-09

【中文标题】如何使用 jquery 在链式反应中附加 DOM

【英文标题】：How do I append DOM in chain reaction using jquery

【发布时间】：2013-07-02 13:21:57

【问题描述】：

在使用 jquery 附加 dom 后，如何再次使用 jquery 玩 dom？ 我猜它们不起作用，因为它们附加在 "$(document).ready();" 之后

例如：

$('.kim2').on('click', function() 
    var ok = $(this).next();
    var ok2 = $(this);
    $('#content').empty().append(ok2, ok);
);

html：

<div class="con">
    <div class="kim2">사고 종류<br />(택일)</div>
    <div id="d" class="kim2b"><div id="d1" class="kim2bb">원동기장치 <br />자전거사고</div>
    <div id="d2" class="kim2bb"><p>자동차 사고</p></div></div>
</div>

现在，我单击“kim2 class”，因此“kim2 div”和它的 next()“kim2b div”将替换原来的“#content div”，但是我不能再使用 jquery 追加到新的 #content div把它们换成旧的。

【参考方案1】：

你的问题是你使用 empty()

来自.empty() docs

如果您想删除元素而不破坏其数据或事件 处理程序（以便以后可以重新添加），请改用 .detach() 。

$('div.kim2bb, div.kim2bc').on('click', // <-- 

您要么需要使用委托 - 要么分离子元素而不是使用空来删除它们

$('#content').on('click','div.kim2bb, div.kim2bc', function()
        // your code here
);

或者改变这个

$('#content').on('click', '.kim2', function () 
    var ok = $(this).next();
    var ok2 = $(this);
    $('#content').empty().append(ok2, ok); //<-- you lose the event handlers here using .empty()
);

到

$('#content').on('click', '.kim2', function () 
    var ok = $(this).next();
    var ok2 = $(this);
    $('#content').children().detach().end().append(ok2, ok);
);

【讨论】：

np :) 总是乐于提供帮助

【参考方案2】：

$('body').on('click', '.kim2', function() 
    var ok = $(this).next();
    var ok2 = $(this);
    $('#content').empty().append(ok2, ok);
);

http://api.jquery.com/on/（参见直接和委托事件部分）

【讨论】：

他们不工作我认为这是因为 (document).ready(); 时附加的 dom 不存在。 ，不是吗？