CODEWITHSUNDEEP
jquerydynamicradio-button
Stone
Stone

Reputation: 111

jQuery Not Appending to Dynamically Created Elements

On my page, I have a dynamically generated list of radio buttons (created with AJAX). The list of radio buttons is dynamically generated because it changes based on a previous form selection. Here is an example of a dynamically generated list of radio buttons (this appears in Firefox's DOM viewer add-on, but not in "View Page Source"):

<li>
<input name="giftcard_value" type="radio" id="25" value="25" />
<label for="25">$25</label>
<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a>
</li>

<li>
<input name="giftcard_value" type="radio" id="50" value="50" />
<label for="50">$50</label>
<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a>
</li>

I also have another jQuery script that I am using to "click" radio buttons indirectly via links/images. In the above code, the actual radio button (inside the input tag) is hidden from the user. The user clicks the radio button by clicking the Select link that has the class "radio-select" (this is actually an image). The jQuery script detects when the link/image is clicked with '$(".radio-select").click' and then runs a function which "clicks/checks" the actual radio button. Here is the jQuery script:

$(".radio-select").click(
            function(event) {
                event.preventDefault();
                var $boxes = $(this).parent().parent().children();
                $boxes.removeClass("selected");
                $(this).parent().addClass("selected");
                $(this).parent().find("[type=radio]").click().attr("checked","checked");
            }
        );

My problem is that the jQuery script does NOT work with the dynamically generated radio buttons. It works if I hard code the radio buttons into the html (viewable via "view page source" in a browser), but not if they're generated dynamically. It seems like the jQuery is not able to detect the ".click" on the link/image, and thus never clicks the actual radio button. Any idea what the problem is? Any help would be much appreciated!

Upvotes: 2

Views: 2828

Answers (4)

run
run

Reputation: 1186

$(".radio-select").live("click", function(event){           
                    event.preventDefault();
                    var $boxes = $(this).parent().parent().children();
                    $boxes.removeClass("selected");
                    $(this).parent().addClass("selected");
                    $(this).parent().find("[type=radio]").click().attr("checked","checked");
                }
            );

Upvotes: 3

Shyju
Shyju

Reputation: 218732

check delegate and on method.

example 

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

http://api.jquery.com/delegate/

from jQuery page,

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation

http://api.jquery.com/on/

example 

$("p").on("click", function(){
alert( $(this).text() );
});

Upvotes: 7

Sandeep
Sandeep

Reputation: 819

If you are using jQuery 1.3.2 and above, you need to use jQuery live. So your binding would become:

 $(".radio-select").live('click',function(event) {

            event.preventDefault();
            var $boxes = $(this).parent().parent().children();
            $boxes.removeClass("selected");
            $(this).parent().addClass("selected");
            $(this).parent().find("[type=radio]").click().attr("checked","checked");

        }
   );

If you are using jQuery below 1.3.2, use livequery plugin.

Upvotes: 1

Alex M
Alex M

Reputation: 3513

The problem is that when your click method is called, the event handler that is created is only attached to all the elements that exist at that time. Your solution is either to add a call to attach the click handler when you create your element or use the on() function to attach to the selector.

Upvotes: 1

Related Questions