jquery onclick不起作用

Question

我有一个link的代码，点击我想要做的事情的链接，但我不知道为什么点击不起作用，警报甚至没有开火

jquery代码

$(document).ready(function(){
    $("#editConcept").on('click','ecAddLink',function(){
        $.getJSON("http://localhost/Mar7ba/Ontology/getAllConcepts/TRUE",function(data){
            alert("William Roma");
            var options = '';
            options+="<option>Select Concept</option>";
            for(var i=0;i<data.length;i++){
                options += "<option>"+data[i]+"</option>";
            }
            $.getJSON("http://localhost/Mar7ba/Ontology/getAllRelations/TRUE",function(data){
                var options2 = '';
                options2+="<option>Select Concept</option>";
                for(var i=0;i<data.length;i++){
                    options2 += "<option>"+data[i]+"</option>";
                }
                $("#editConcept ul li:last").before('\
<li>\n\
    <p>\n\
        <label>Concept</label>\n\
        <select name="newConcepts[]">'+options+'</select>\n\
        <span class="errorMessage"></span>\n\
    </p>\n\
    <p>\n\
        <label>Relations</label>\n\
        <select name="newRelations[]">'+options2+'</select>\n\
        <span class="errorMessage"></span>\n\
        <a href="#" class="removeA">delete</a>\n\
    </p>\n\
</li>');
            });
        });
    });
});

html代码

<div id="editConcept" class="container">
    <form id="ecForm" method="POST" action="<?php echo URL; ?>Ontology/conceptEdit">
        <ul>
            <li>
                <label>Select Concept</label>
                <select class="ConceptSelector1"></select>
                <span class="errorMessage"></span>
            </li> 
            <li id="ecOldRelations">
                <p>
                    <label>Old Relations</label>
                </p>
            </li>
            <li id="ecNewRelations">
                <label>New Relations</label>
                <a href="#" class="smallLink" id="ecAddLink">add new relations</a>
            </li>
            <li>
                <input type="submit" class="button1" value="save"/>
            </li>
        </ul>
    </form>
</div>

the link has an id = ecAddLink

Answer 1

选择器中的missing the pound sign：#ecAddLink。大多数jQuery选择器看起来都像有效的CSS字符串，如果我没记错的话，Prototype就是接受没有井号的ID的框架。

除此之外，我也非常讨厌在代码中拥有完整的URL，如果你不能全局存储webroot var，你应该尝试相对。而且我也不喜欢字符串中的这么多HTML（看起来很糟糕，难以维护/更新等）。您应该将HTML放在页面中的隐藏元素中，或inside a script tag，这样更容易IMO。

Answer 2

您忘记放置#以按ID选择元素：

$("#editConcept").on('click','#ecAddLink',function() {
    ...
});