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

您正在尝试将事件绑定到尚不存在的元素。

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

Answer 2

您无法将事件处理程序直接绑定到尚不存在的元素。但是可以使用绑定到稍后将创建的元素的父元素的委托事件处理程序：

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

您在加载开始时使用.click创建的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 4

使用jquery的.on方法

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

警报后jQuery点击事件无法正常工作

4 个答案: