在div中打開一個錨點鏈接

Question

我想阻止在document body上打開anchor鏈接，而是在div內部進行渲染。 我使用過e.preventDefault()但我認為JQuery沒有針對該事件。

我是程序化地創建一個ul並從array項追加li然后將ul附加到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>

然后，我為每個element添加classes 。 除了ul所有東西都在class ，我認為這可能就是為什么它不是針對anchors 。

jQuery ：

$(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...');
     });  

});

我在reload得到第一個console消息，但on click沒有第二個

問題：

1. 我是否需要ul上的課程才能正確定位？ 我只是為了這個目的將它添加到ul中。

2. 這段代碼是否與其他所有代碼一起執行，而ul可能尚未創建？ 如果event存在，JS / jQuery仍然應該bind並繼續監聽event - 或者在這種情況下，在click event觸發后找到我所針對的element ，不是嗎？

Answer 1

在代碼中指出幾個問題......

首先是選擇者不對。 你space after your element and it's class后面有一個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>