0

我正在做一个手工项目，这个项目是由一个明显比我更擅长 HTML 和 JavaScript 的人编写的。html 有这样的 AJAX 链接：

<ul class="subNav">
       <li><a link="contacts.html">Contacts</a></li>
       <li><a link="contacts_add.html">Add Contact</a></li>
</ul>

我认为在这段代码中处理：

$('.subNav li a').click(function() {

        var href = $(this).attr('link')

        $('#mainStage').load(href, function() {
            pageLoad();
        })
})

上面的所有代码都能完美运行。

我的问题是我似乎无法重新创建此功能。我正在使用这个 HTML：

 <div class="nameTitle colorOne"><a link="contacts_add.html">
      <span class="firstNameField">Contact Name</span>
 </a></div>

和这个JavaScript：

$('.nameTitle').click(function() {
        alert('')
        $('#mainStage').load("contacts_add.html", function() {
            pageLoad();
        })
})

当我单击“nameTitle”类时，它应该将contacts_add.html 加载到页面的mainStage 部分，但我看不到任何事情发生。我敢肯定，精通这种编码风格的人可以告诉我为什么我的事件从不触发，而早期的代码却触发了。

提前致谢，

4

3 回答 3

1

您应该尝试将代码更改为以下内容：

$('.nameTitle').click(function() {

  //This line finds the address to load
  var address = $(this).children("a").attr("link");

  //This line loads the address and then runs the pageLoad function when it has completed
  $('#mainStage').load(address, function() {
    pageLoad();
  });
});

如果这不起作用，可能是因为 html 是动态加载的。在这种情况下您需要使用，请参阅此处.on的此链接。

为了回应下面布雷特的评论，我整理了一个 jsfiddle.on在这里展示。我还补充说.preventDefault，因为这可能会导致问题。

于 2012-07-22T23:46:56.683 回答
0

尝试

$('.nameTitle a').click(function() {

可能是您正在尝试使用仅接受点击“a”标签的浏览器，尽管希望它们越来越少。

于 2012-07-22T23:54:16.673 回答
0

'click' 事件永远不会在您的 div 上引发，因为有a一个定义了 href 的内部元素。单击后，将首先在锚链接上引发事件，默认情况下，该事件将重定向到 href 指定的位置。为了使其正常工作，请在以下位置出现点击时捕捉点击a：

$('.nameTitle a').click(function(e) {
    e.preventDefault(); // prevent browser from following href
    alert('');
    $('#mainStage').load("contacts_add.html", function() {
        pageLoad();
    });
});

演示- 注释掉负载，因为该页面不在此服务器上。另请注意，我将您的a元素更改为具有属性href而不是link.

于 2012-07-22T23:55:30.680 回答