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

您在选择器中缺少英镑符号 ： #ecAddLink 。 大多数jQuery选择器看起来都像是有效的CSS字符串，Prototype是一个框架，如果我没记错的话，该框架可以接受没有井号的ID。

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

Answer 2

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

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