Question

我想阻止在.php anchor上打开document链接，而是在body内进行渲染。我使用了div，但我认为JQuery并不是针对该事件。

我是以编程方式创建e.preventDefault()并从ul项添加li，然后将array附加到ul {1}}。结构如下所示：

div

然后，我将//this is just a structure, not the actual HTML <div id="results"> <ul> .ulStyle <li> .list-group-item -header -p .lead -a .anchorStyle </li> </ul> </div>添加到每个classes。除了element之外的所有内容都会获得ul，我认为这可能就是为什么它没有定位class。

的jQuery ：

anchors

我在$(function(){ console.info('** anchor-tag click handler **') /* I've tried variations on the targeting from a single $('.anchorStyle') to what you see below. */ $('div #results ul .ulStyle li .list-group-item a .anchorStyle') .click(function(e) { e.preventDefault(); $('#results').empty(); $('#results').load( this.getAttribute('href') ); console.log('anchor clicked...'); }); });上收到了第一条console邮件，但第二条reload收到了on click邮件。

问题：

我是否需要ul上的课程来正确定位？我只是添加为了这个目的，它到ul。
这段代码是否与其他所有代码一起执行，而ul可能尚未创建？ JS / jQuery应该仍然bind并继续听event（如果存在） - 或者在此案例，在element火灾后找到click event我定位的目标，没有？

Answer 1

代码中的一些问题指出......

首先是选择器不对。你有一个错误的space after your element and it's class（例如：ul .ulStyle这里.ulStyle被认为是ul的孩子。）选择器必须是这样的

$('div#results ul.ulStyle li.list-group-item a.anchorStyle')

注意我删除了元素和它的类之间的空格..

即使完成了这些更改，它仍然无法为您工作，因为这些元素是动态添加的。从OP中取这条线

我是程序化地创建一个ul并从数组项追加li然后将ul附加到div。

因此，这需要使用事件委派

语法必须更改为

$(document).on('click','div#results ul.ulStyle li.list-group-item a.anchorStyle',function(){//your stuff here});

此外，您可以将选择器简单化为 '#results a.anchorStyle'

Answer 2

这里有一个结构的工作示例：

$('#results ul li a').click(function(e){
  e.preventDefault();
  console.log(this.href);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">    
  <ul>
    <li> 
      <header>HEADER</header>
      <p></p>
      <a href="/a">ANCHOR</a>
    </li>      
  </ul>
</div>

在div中打开一个锚点链接

2 个答案: