警報后jQuery點擊事件無法正常工作

Question

附加表后，我正在檢查按鈕點擊事件。 Javascript警報正在運行，但jQuery click事件無效。

我似乎無法找到我的錯誤。

$("#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> ' ) ;
        }
    }); */
});

Answer 1

您正在嘗試將事件綁定到尚不存在的元素。

嘗試使用$(document).on('click', '#inconbutt', function() { ... });

Answer 2

您不能將事件處理程序直接綁定到尚不存在的元素。 但是您可以使用綁定到稍后將創建的元素的父元素的委托事件處理程序：

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

使用.on()語法，jQuery將處理父"div#Add" .on() "div#Add"元素中的任何單擊，並測試它是否出現在與第二個參數中的"#inconbutt"選擇器匹配的元素上。 如果它確實你的功能被調用。

如果您使用的是早於1.7的jQuery版本，請使用.delegate()而不是.on() 。 如果您使用的是1.4.2之前的版本，請使用.live() 。

或者，移動$("#inconbutt").click(...)到附加元素的if語句中。

而不是每次單擊復選框時附加和刪除整個表格，我建議始終將其包含在您的代碼中，但顯示並隱藏它。

Answer 3

您在加載開始時使用.click創建的jQuery函數，然后輸入您的輸入。 因此jQuery無法識別事件並且您的函數未被調用。

嘗試使用動態綁定功能，例如：

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

要么

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

或者，如果您使用的是更新版本的jQuery 1.7+，那么您也可以使用

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

Answer 4

使用jquery的.on方法

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