CODEWITHSUNDEEP
javascriptjqueryhtmldom
tulsi
tulsi

Reputation: 141

jQuery click event not working after alert

After appending table I am checking on button click event. Javascript alert is working but jQuery click event is not working.

I cannot seem to find my mistake.

$("#inputcon").change(function(e){

    if($(this).attr('checked')){
        $(this).val('TRUE');

    }else{
        $(this).val('FALSE');                
    }

    if($(this).val() == 'TRUE'){

        $("div#Add").append(' <table id="inputT" style=""> <tr> ' +
            '<td><label>Input Control Name :</label>  </td>' +
            '     <td><input id="icname" type="text" name="icname"  ></td>' +
            ' </tr>' +
            ' <tr>' +
            '     <td><label>Parameter Name :</label>  </td>' +
            '    <td><input id="pname" type="text" name="pname"  ></td>' +
            ' </tr>             ' +          
            ' <tr >' +
            '    <td><label>DataType:</label>  </td>' +
            '   <td><select name="datatype"  class="texta" id="datatype"  style="width: 328px "   > ' +
            '    <option value="string">Text</option> ' +
            '         <option value="date">Date</option>' +
            '         <option value="number">Number</option>' +
            '     </select></td>' +
            '      </tr>' +
            '     <tr  >' +
            '       <td><label>Input Type:</label>   </td>' +
            '   <td> <select name="inputtype"  class="texta" id="inputtype"  style="width: 328px "   >' +
            '         <option value="text">Text</option>' +
            '          <option value="date">Date</option>' +
            '          <option value="singleList">Single Select List</option>' +
            '         <option value="singleQue"  >Single Select Query List</option>' +
            '          <option value="multiList" selected="true">Multi Select List</option>' +
            '         <option value="multiQue" selected="true">Multi Select Query List</option>' +
            '      </select></td>' +
            ' </tr><tr><td><input onClick="alert(this.id);" id="inconbutt" type="button" value="Add InputControl" name="Add InputControl"></td></tr> </table>');
    }else{

        $("table#inputT").remove();
    }
});
  $("#inconbutt").click(function() {
    alert("add");
    var i1 = $("#icname").val() ; 
    var pname = $("#pname").val();
    var dtype = $("#datatype").val();
    var itype = $("#inputtype").val() ;
    alert(i1);
    alert(pname);
    alert(dtype);
    alert(itype);
 /*   $.ajax({
        type:"POST",
        url:"Welcome.jsp",
        data:"inputname="+i1+"&pname="+pname+"&datatype="+dtype+"&intype"+itype,
        success: function(){
            $("table#inputT").remove();
            $("table#tableI").append(' <tr><td><a href="#">'+i1+'</a></td><td><a href="#">Remove</a></td></tr> ' ) ;
        }
    }); */
});

Upvotes: 1

Views: 1556

Answers (4)

Arun Poudel
Arun Poudel

Reputation: 627

The jQuery function you created with .click at bind at the start of the load and your input is being placed after that. So jQuery doesn't recognize the event and your function isn't called.

Try using dynamic binding functions such as:

$.live(/*yourevent*/'click', function(){
  // your function
});

OR

$.delegate(/*selector*/, 'click', function(){
  //your function
});

OR if you are using newer version of jQuery 1.7+ then you can also use

$.on('click', /*selector*/, function(){
  //your function
});

Upvotes: 1

Jitender
Jitender

Reputation: 7969

Use .on method of jquery

$(document).on('click', '.button.clickable', function () {...});

Upvotes: 0

Danil Speransky
Danil Speransky

Reputation: 30453

You're trying to bind an event to the element, which does not exist yet.

Try to use $(document).on('click', '#inconbutt', function() { ... });

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150050

You can't bind an event handler directly to an element that doesn't exist yet. But you can use a delegated event handler bound to the parent element of the element that will be created later:

$("div#Add").on("click", "#inconbutt", function() {
   // your code here
});

With that syntax of .on(), jQuery will process any click within the parent "div#Add" element, and test whether it occurred on an element that matches the "#inconbutt" selector in the second parameter. If it does your function is called.

If you're using a version of jQuery older than 1.7 use .delegate() instead of .on(). If you're using a version older than 1.4.2 use .live().

Alternatively, move the $("#inconbutt").click(...) to within the if statement where you append the element.

Rather than appending and removing the whole table every time the checkbox is clicked I'd suggest including it in your code all the time but showing and hiding it.

Upvotes: 1

Related Questions