Question

我会以下面的主题方式提出我的问题，请提前阅读！

功能：

$("#someAJAXContainer").load("someHTML.html");

上下文：我想只有一个起始页面，然后我会在中间添加一个div，动态加载所有内容。与主页面非常相似（如果不相同）。

...
<body>
<div id='menu'></div>

<div id='someAJAXContainer'></div>
<button>loadAjaxDiv</button>

<div id='footer'></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery-ui.min.js">    </script>
<script src="functions.js></script>
</body>
...

functions.js就像这样：

$(document).ready(function(){
   $("#someAJAXContainer").load("someHTML.html");
   $("button").button();
   $("#responseA").click(function(event){
     alert("the link should no longer took you to jquery.com");
     event.preventDefault();
   });
 });

问题：当容器上加载了AJAX Response HTML时，它没有链接到已经存在的JQuery代码。因此，如果响应类似于：

<div id ='response'>
<a id = 'responseA' href="http://jquery.com/">jQuery</a>
</div>

该链接将带您到jquery.com页面:(

所以我解决这个问题的方法是使用（在functions.js上）：

$("#someAJAXContainer").load("someHTML.html", function() {
    $("#responseA").click(function(event){
         alert("the link should no longer took you to jquery.com");
         event.preventDefault();
       });
});

但是现在我有多个级别的内部ajax，而且它的代码变得混乱了！我不太喜欢它的制作方式。所以我想知道我在这里可能会犯的是什么样的错误。这在结构，良好的实践，水平上是否正确？

希望我清楚这个问题。我一直在谷歌搜索它，我得到的唯一答案与之前提出的答案类似，但它都非常含糊。

问候;

Answer 1

尝试使用live。

  $("#responseA").click(function(event){
     alert("the link should no longer took you to jquery.com");
     event.preventDefault();
  });

这会将click事件仅绑定到启动时DOM中的#responseA元素，但不适用于稍后加载的任何其他元素。 Live会解决这个问题

  $("#responseA").live('click', function(event){
      ...
  });

Answer 2

补充RealShadow。正如我在回复中所述，您可以看到.live()无法解决需要更改元素属性或行为的问题，它只允许您附加事件监听器。

因此，对于尝试使按钮标记表现为按钮的情况，例如：

<div id='response'><buttonOK>ok</buttonOK></div>

我发现更有趣的解决方案是添加.ajaxStop()或.ajaxSuccess()事件侦听器。它将作为AJAX调用的$(document).ready(function() {})工作，因此可以在此设置所有AJAX.ready（）。必须考虑到标识符$（“＃ajaxContainer”）必须指向加载HTML响应的容器，以便它可以找到新生成的子DOM。

$("#ajaxContainer").ajaxStop(function() {
        // Ajax handler called.
        $("buttonOK").button();
        });

Jquery递归/“InAJAXResponse”用法

2 个答案: