Click event not firing on button using Jquery

Question

In the code below the Save button click is not firing.

Any ideas why?

[code]

<script type="text/javascript">
$(function () {
    $(".Join").live("click", function () {
        var html = "<tr><td colspan='3'>Enter Password: &nbsp;&nbsp;<input type='password' id='pwd' />";
        html += "&nbsp;&nbsp;<input type='button' class='Save' value='Save' /></td></tr>";

        $(this).closest("tr").after(html);
        return false;
    });

    $(".Save").live("click", function () {

        var json = { Password: $(this).closest("#pwd").val() };

        $.ajax({
            url: "/Group/ConfirmPassword",
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(json),
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                if (result.Success == true)
                    window.location.href = result.Url;
                else
                    alert(result.ErrorMessage);
                return false;
            }
        });
    });
});

[/code]

Please provide an example with the button on jsfiddle.net

Jim Mitchener
– Jim Mitchener

2011-03-20 01:55:55 +00:00
Commented Mar 20, 2011 at 1:55 — Jim Mitchener
– Jim Mitchener, Commented Mar 20, 2011 at 1:55

mattsven · Accepted Answer · 2011-03-20 02:32:50Z

4

Because at the time you create the event handler for $(".Save")'s click, it does not exist. Use:

$(function () {
    $(".Join").live("click", function () {
        var html = "<tr><td colspan='3'>Enter Password: &nbsp;&nbsp;<input type='password' id='pwd' />";
        html += "&nbsp;&nbsp;<input type='button' class='Save' value='Save' /></td></tr>";

        $(this).closest("tr").after(html);

        $(".Save").live("click", function(){
            var json = { Password: $(this).closest("#pwd").val() };

            $.ajax({
                url: "/Group/ConfirmPassword",
                type: "POST",
                dataType: 'json',
                data: JSON.stringify(json),
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    if (result.Success == true)
                        window.location.href = result.Url;
                    else
                        alert(result.ErrorMessage);
                    return false;
                }
            });
        });

        return false;
    });
});

EDIT: Based on findings in jsFiddle example...change the code you have already for loading in the JoinList to:

$("#grouplist").load(
    AppRoot + "Group/JoinList/",
    { page: page_num },
    function(){
        $(".Join").live("click", function () {
            var html = "<tr><td colspan='3'>Enter Password: &nbsp;&nbsp;<input type='password' id='pwd' />";
            html += "&nbsp;&nbsp;<input type='button' class='Save' value='Save' /></td></tr>";

            $(this).closest("tr").after(html);

            $(".Save").live("click", function(){
                var json = { Password: $(this).closest("#pwd").val() };

                $.ajax({
                    url: "/Group/ConfirmPassword",
                    type: "POST",
                    dataType: 'json',
                    data: JSON.stringify(json),
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        if (result.Success == true)
                            window.location.href = result.Url;
                        else
                            alert(result.ErrorMessage);
                        return false;
                    }
                });
            });

            return false;
        });
    }
);

edited Mar 20, 2011 at 2:32

answered Mar 20, 2011 at 1:55

mattsven

23.5k11 gold badges73 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Malcolm Over a year ago

The site is only local to my PC.

Malcolm Over a year ago

ok give some time to register and add it, i have never used it.

Malcolm Over a year ago

After my page loads I call a js file to create a table etc. So how do add that to jsFiddle? So its dynamic, the html source does not have the markup of the table. I dont know to setup jsFiddles in this scenario.

mattsven Over a year ago

OK I figured it out. $(".Join") does not exist either because you are dynamically loading in the HTML that creates it. See my edit.

Malcolm Over a year ago

If I run this script $(".Save").val() I get "Save" so it is in the DOM but no click occurring.

Collectives™ on Stack Overflow

Click event not firing on button using Jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related