CODEWITHSUNDEEP
javascriptjqueryhtml
user1839601
user1839601

Reputation: 119

Why does my on click button not work. JavaScript/jQuery

just wondering if anyone can quickly point out in my JSfiddle link below why this on click isn't working.

Wrecking my head, I've tried multiple different event binding techniques but can't seme to get it to work.

Html:

    <form method="GET">
    <input type="button" id="inject_XML_details" value="Show Details" />
    </form>
    <div id="xml_details">asd</div>

JavaScript:

function loadTemp(){
 $("#xml_details").append("<p class='myBold'>" + "LOLOLOLOL" + "</p>");
 });
        $("#inject_XML_details").on("click",function(){
            $("#xml_details").empty();
            loadTemp();       
        });

http://jsfiddle.net/nLRvH/17/ Updated: http://jsfiddle.net/nLRvH/19/

Upvotes: 1

Views: 419

Answers (5)

Wilson
Wilson

Reputation: 608

The problem is $ function is case sensitive so that is not the same $('A') than $('a').

Better example:

$("#inject_xml_details") and $("#inject_XML_details") are different.

It is working now, please take a look:

http://jsfiddle.net/SabdielRivera/nLRvH/23/

Upvotes: 1

Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13402

Your id has capitalization, they don't match. Here is a working fiddle FIDDLE. I changed the underscores to hyphens, just while testing, but your issue is because the id's didn't match. I also removed the unnecessary bracket.

You target #inject_XML_details, in the HTML the id is inject_xml_details xml with lowercase.

function loadTemp() {
    $("#xml-details").append("<p class='myBold'>" + "LOLOLOLOL" + "</p>");
};
$("#inject-xml-details").on("click", function () {
    $("#xml-details").empty();
    loadTemp();
});

Upvotes: 0

Gert B.
Gert B.

Reputation: 2362

Im not sure, but your page reloads on click of the button? in that case:

$("#inject_XML_details").on("click",function(e){
        e.preventDefault()
        $("#xml_details").empty();
        loadTemp();       
    });

Upvotes: 0

jmore009
jmore009

Reputation: 12923

Two things:

you have an extra ) after function loadTemp(){ }); and you're calling #inject_XML_details and it's #inject_xml_details

Upvotes: 3

Andy
Andy

Reputation: 1043

You have got unnecessary bracket after function loadTemp.

 function loadTemp(){
     $("#xml_details").append("<p class='myBold'>" + "LOLOLOLOL" + "</p>");
 }

instead of

(...)
});

And as @jmore009 pointed, selectors are case sensitive - in selectors you have got inject_xml_details, in JS - inject_XML_details

Upvotes: 0

Related Questions