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

问题是$ function是区分大小写的，因此$（'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 with smallcase。

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

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

5 个答案: