1

我将在下面以主题方式提出我的问题，tks提前阅读！

功能：

$("#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 响应 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 并且它的代码很乱！我不太喜欢它的工作方式。所以我想知道我在这里可能会犯什么样的错误。这在结构、良好实践和层面上是否正确？

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

问候;

4

2 回答 2

0

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

因此，对于尝试使按钮标记充当按钮的情况，例如：

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

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

$("#ajaxContainer").ajaxStop(function() {
        // Ajax handler called.
        $("buttonOK").button();
        });
于 2011-09-28T10:53:05.180 回答
0

尝试使用live。

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

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

  $("#responseA").live('click', function(event){
      ...
  });
于 2011-09-27T22:39:53.973 回答