jQuery單擊事件警報後不工作

Question

追加表後，我檢查按鈕單擊事件。 JavaScript警報正在工作，但jQuery點擊事件不起作用。

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

$("#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

你。點擊在綁定在負載開始創建你的輸入被放置後的jQuery函數的方法。所以jQuery不會識別這個事件，並且你的函數沒有被調用。

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

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

OR

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

，或者如果您使用jQuery的新版本1.7+那麼你也可以使用

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

Answer 2

您試圖將事件綁定到元素，該元素尚不存在。

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

Answer 3

你不能一個事件處理程序直接綁定到不存在的元素。但是你可以使用綁定到後面將要創建的元素的父元素委派的事件處理程序：

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

隨着.on()這句法，jQuery將處理父"div#Add"元素中的任何點擊，並測試它是否發生在與第二個參數中的"#inconbutt"選擇器匹配的元素上。如果它是你的功能被調用。

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

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

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

Answer 4

使用jQuery的.on

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