Javascript 重新编写jquery代码以在不同的上下文中工作，有什么变通方法吗？

我正在使用

html:

<div id="dialog" style="border:1px solid green; width:150px; margin:auto;">

<br />
<div class="dialog_insider" style=" border:1px solid red; width:120px; margin:auto; display:none;">

this is dialog insider
</div><!-- end of id  dialog_insider-->

<br />

</div>

单击“dialog\u insider”div上的对话框不再显示警报框。要在那里显示它，我必须删除以下代码段

$(".dialog_insider").click(function(){

     alert("this is an alert box");  
});

并按以下方式放置：

$("#dialog").click(function(){

    my_dialog=  $(this).clone();
    my_dialog.dialog();

    $(".dialog_insider", my_dialog).css('display','block');

    $(".dialog_insider", my_dialog).click(function(){
        alert("this is an alert box");  
    });
});

我知道很多。我的问题是：

这里的上下文概念是什么，以前的编码模式不会掩盖对话框上的“dialog\u insider”div

如果要在不同的上下文中重新编写的代码数量很大，那么是否有任何变通方法，以便我可以轻松地使代码在不同的上下文中工作，而无需重新编写所有代码

---

这是因为您正在创建一个新元素，并通过clone（）将其插入DOM。“单击”处理程序未绑定到动态创建的元素。您需要切换到

.on（'click'，function（）{…}）和使用委派事件（jQuery>=1.7）

这是。看看这本书

请注意，您应该

避免对大型文档上的委托事件过度使用document或document.body

我认为，在本质上是否普及只与事件处理程序有关，而与选择器无关。我说的对吗？从您链接的文档中可以看出：
不再推荐使用.live（）方法，因为jQuery的更高版本提供了更好的方法，但没有缺点。
请不要再建议使用它了。我想我应该说的是，动态创建的元素不受单击处理程序的约束，因为它们不是初始DOM的一部分。“这应该更有意义。”巴兹梅加卡帕谢谢你提供的信息。我更新了我的答案以反映这一点。
$("#dialog").click(function(){

    my_dialog=  $(this).clone();
    my_dialog.dialog();

    $(".dialog_insider", my_dialog).css('display','block');

    $(".dialog_insider", my_dialog).click(function(){
        alert("this is an alert box");  
    });
});