jquery onclick doesn't work

Question

I have a code with a link , when clicking the link i want to do something, but i don't know why the click doesn't work, and the alert doesn't even fire

jquery code

$(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 code

<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

You are missing the pound sign in the selector: #ecAddLink. Most jQuery selectors are going to look like valid CSS strings, Prototype is the framework that accepts IDs without a pound sign if I remember correctly.

Besides that, I also really hate having full URLs in the code like that, you should try to go relative and if you can't store a webroot var globally. And I also am not a fan of so much HTML in a string (looks awful, hard to maintain/update, etc.). You should put the HTML in a hidden element in the page, or inside a script tag, easier that way IMO.

Answer 2

You forgot to place # for selecting element by ID:

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