为什么我的单击按钮不起作用。 JavaScript / jQuery

Question

只是想知道是否有人可以在下面的我的JSfiddle链接中快速指出为什么这种单击不起作用。

令我头疼的是，我尝试了多种不同的事件绑定技术，但无法成功发挥作用。

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/更新： http : //jsfiddle.net/nLRvH/19/

Answer 1

两件事情：

你有一个额外的)后， function loadTemp(){ }); 而您正在调用#inject_XML_details ，它是#inject_xml_details

Answer 2

问题在于$函数区分大小写，因此$（'A'）与$（'a'）不同。

更好的例子：

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

现在正在工作，请看一下：

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

Answer 3

在loadTemp函数之后，您得到了不必要的括号。

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

代替

(...)
});

正如@ jmore009所指出的，选择器区分大小写-在选择器中您具有inject_xml_details ，在JS中inject_XML_details

Answer 4

我不确定，但是单击该按钮会重新加载页面吗？ 在这种情况下：

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

Answer 5

您的ID大小写不符。 这是一个工作的小提琴FIDDLE 。 在测试时，我将下划线更改为连字符，但是您遇到的问题是因为ID不匹配。 我还删除了不必要的括号。

您以#inject_XML_details目标，在HTML中，id是小写的inject_xml_details xml。

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