0

I have a drop down select box. Through jquery on run time that drop then hides and the new drop down made which made from <ul> and <li> tags.

Now through firebug I notice that when the drop down is closed then there is one <li> and when I expand the drop down then in the firebug more <li> displayed.

So I want to implement the click event on these <li>. I tried this code.

 $(document).ready(function() {
  alert('a');
  $('.fb li').each(function() {
      alert('li');
    $(this).click(function(event) { 
           alert('hed');
        var fbpage = $(this).attr("rel");
        if(fbpage != 0) {         
            window.open(''+fbpage+'', '_blank');
        }

    });
    });
    });

the alert('a') and alert('li') works but then that click event is not working.

Any idea about this? and if you does not understand my question then ask me I will explain it more.

2

Since you are running D6, you should look into the live() jQuery handler ( http://api.jquery.com/live/ ) that can be used to attach these click handlers to your dynamic elements.

More information on this can be found by googling or otherwise searching for

jquery click event on dynamically generated elements

You might also want to look into the Drupal.behaviors method of including jQuery and javascript instead of the $(document).ready() approach you've used.

0

When you code is being executed the extra <li> elements you want to capture dont exist on the page, only the one <li> element. Therefore nothing can bind to them (makes sense).

The generation of the extra <li> elements; is that some code you have written? If it is just add your click event to the script that adds them in. As they now exist on the page you can bind functions to them.

Otherwise if the extra list items are not created by you and are being added by some module that you cant manipulate Jimajamma's answer is the way to go for binding events to dynamicly introduced elements. http://api.jquery.com/live/

  • If somebody could point to me how to put inline code blocks so i can write <li> in main text please :) – cconolly Jul 13 '12 at 7:49
  • I've added some inline code to your answer, if you edit you'll be able to see how it got there :) – Clive Jul 13 '12 at 8:02
0

Jquery event will not be applicable for dynamic HTML elements. ie, while we load page, your DOM should contain an element for which you are going to do any action like click or some thing.

For dynamically creating element we should use jquery live()

Example code :

    $(".fb li").live("click",function(){
   var fbpage = $(this).attr("rel");
        if(fbpage != 0) {         
            window.open(''+fbpage+'', '_blank');
        }
});

Try below link for more details

jQuery live method example/Demo

  • but this .live() function works with the latest jquery. But in Drupal 6 the version of the jquery is 1.3 or 1.4 i think. – Ahmad Jul 13 '12 at 12:52
  • 2
    live() was added in jQuery v1.3. Drupal 6 ships with v1.2.6, but you can upgrade it to v1.3.2 using the jQuery Update module. live() has actually been deprecated as of jQuery v1.7 in favour of the on() method, so shouldn't be used with that latest version of jQuery – Clive Jul 13 '12 at 13:00
-1

I recommend this article. It works very well.

http://makitweb.com/attach-event-to-dynamically-created-elements-with-jquery/#comment-941

  • Welcome to Drupal Answers! Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – mpdonadio May 7 '18 at 12:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.