在div中打开一个锚点链接

Question

I want to prevent an anchor link to open on the document body and instead render inside a div . I've used e.preventDefault() but I think JQuery isn't targeting that event.

I'm programmatic-ly creating a ul and appending li 's to it from array items then appending the ul to a div . The structure looks like this:

//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>

Then, I add classes to each element . Everything but the ul is getting the class and I think that may be why it's not targeting the 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...');
     });  

});

I get the first console message on reload but not the second on click .

Questions:

1. Do I need a class on the ul to target it properly? I'm only adding it to the ul for that purpose.

2. Does this piece of code execute with everything else and the ul may not have been created yet? JS/jQuery should still bind and keep listening to an event if it exists - or in this case, find the element I'm targeting after the click event fires, no?

Answer 1

Couple of problems in the code to point out...

First is that the selectors are not right. You have a space after your element and it's class which is wrong (Eg: ul .ulStyle here .ulStyle is considered as a child of ul).The selector must be like this

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

Notice I have removed the spaces between the element and it's class..

Even after getting this changes done it still won't work for you because the elements are added dynamically. Taking this line from the OP

I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div.

So this calls for a need to use event delegation

The syntax must change to

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

Further you can keep the selector simple as '#results a.anchorStyle'

Answer 2

Here you have a working example with your structure:

 $('#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>