CODEWITHSUNDEEP
javascriptjquery
Ferex
Ferex

Reputation: 575

Why can't I target li element with jQuery.click()?

I have this html:

<ul id="ul_places_list"> 
  <li data-placesCode="6">  
    <a class="places_dtl" href="#">  
      <div>  
        <img src="http://dev.mysite.it/images/9_1418893365.jpg">  
      </div>  
      <label>Coming Out</label>  
    </a>   
  </li>
  <li data-placesCode="8">  
    <a class="places_dtl" href="#">  
      <div>  
        <img src="http://dev.mysite.it/images/9_1418893594.jpg">  
      </div>  
      <label>Friends</label>  
    </a>   
  </li>
</ul>

and this javascript 

$(document).delegate('a','click',function(){//used to switch page
    console.log('delegate executed');
    var a = $(this);
    if(a.attr('href') != '#'){
        event.preventDefault();
        toPage(a.attr('href'));
    }
});
$(document).ready(function(){
    $('#ul_places_list li').click(function(){
        var code = $(this).attr('data-placesCode');
        console.log('code is: ' +code);
    });
});

The problem is that when I click on list element only the delegated click on the element fires and not the event on the "li" element. The "li" elements are added after an Ajax call.
What's going? What am I missing?

Upvotes: 0

Views: 1558

Answers (3)

Eduardo V&#233;lez
Eduardo V&#233;lez

Reputation: 193

if you add the "li" elements in a AJAX call you should add the click event after the elements load. Add this when ajax call end:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addEventToControls)

function addEventToControls()
{
 $('#ul_places_list li').click(function(){
            var code = $(this).attr('data-placesCode');
            console.log('code is: ' +code);
        });
}

The add_endRequest Manager fire the handler when a Ajax Call end.

Upvotes: 0

Naftali
Naftali

Reputation: 146302

The below answer actually is just a different implementation of your code.

The real answer is

This )}; was the problem. Should be this });.

From the other answer: https://stackoverflow.com/a/27571915/561731

But you really should be using .on in new code :-)

Old answer:

Try using .on

So you can do:

$(document).on('click', 'a', function () {
    //event for anchor tag
});

$(function () {
    $('#ul_places_list').on('click', 'li', function () {
        //stuff for li click event
   });
});

Upvotes: 1

imtheman
imtheman

Reputation: 4843

This )}; was the problem. Should be this });.

    $(document).delegate('a','click',function(){//used to switch page
	    console.log('delegate executed');
	    var a = $(this);
	    if(a.attr('href') != '#'){
		    event.preventDefault();
		    toPage(a.attr('href'));
	    }
    });
    $(document).ready(function(){
        $('#ul_places_list li').click(function(){
		    var code = $(this).attr('data-placesCode');
		    console.log('code is: ' +code);
	    });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="ul_places_list"> 
      <li data-placesCode="6">  
        <a class="places_dtl" href="#">  
          <div>  
            <img src="http://dev.mysite.it/images/9_1418893365.jpg">  
          </div>  
          <label>Coming Out</label>  
        </a>   
      </li>
      <li data-placesCode="8">  
        <a class="places_dtl" href="#">  
          <div>  
            <img src="http://dev.mysite.it/images/9_1418893594.jpg">  
          </div>  
          <label>Friends</label>  
        </a>   
      </li>
    </ul>

Upvotes: 2

Related Questions