CODEWITHSUNDEEP
jquery
MBehtemam
MBehtemam

Reputation: 7919

Can't select element in DOM with jQuery

I created a page that receives a button from another page with jQuery AJAX but when I click on this button nothing happens. Code: 

$(function () {
    //$("#Menu ul li").click(function () { alert("ok"); });

    $("a").button();

    $("#Menu ul li:nth-child(2)").click(function () {
        $("#ajaxLoader").fadeIn('slow');
        $.ajax({
            url: "CreateDataBase.htm",
            type: "GET",
            dataType: "html",
            success: function (data) {
                $("#ajaxLoader").fadeOut('slow');
                $("#Sample").html("").append(data).css("textAlign", "center").css("paddingTop","30px") ;
                $("a").button();
            }
        });
    });

    $("#Sample input:submit").click(function () { alert("Ok"); });
});

createdb page:

<a id="CreateDB">Create a Database</a>

I am also using jQuery UI. code in snipt.org

Upvotes: 0

Views: 1922

Answers (2)

StilgarBF
StilgarBF

Reputation: 1060

At the time your event is bound, the button isn't there. You want to either bind the event in the ajax-success-callback, or (better) use eventdelegation:

$('body').on('click', "#Sample input:submit", function () { alert("Ok"); });

see http://api.jquery.com/on/ for details.

Upvotes: 1

Bagira
Bagira

Reputation: 2243

Try using live method in jQuery API. Some thing like following

$("#Sample input:submit").live("click", function(){ alert("Ok"); });

Upvotes: 1

Related Questions