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 - это среда, которая принимает идентификаторы без знака фунта, если я правильно помню.

Кроме того, я также очень ненавижу наличие полных URL-адресов в коде, как это, вы должны попытаться относиться к нему, и если вы не можете хранить webroot var глобально. И я также не являюсь поклонником большого количества HTML-кода в строке (выглядит ужасно, сложно поддерживать/обновлять и т. Д.). Вы должны поместить HTML в скрытый элемент на странице, или inside a script tag, проще, чем ИМО.

Answer 2

Вы забыли разместить # для выбора элемента по ID:

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