jQuery点击事件在警报后不起作用

jQuery click event not working after alert

本文关键字：不起作用 事件 jQuery      更新时间：2023-09-26

在附加表之后，我正在检查按钮单击事件。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> ' ) ;
        }
    }); */
});

您使用创建的jQuery函数。在加载开始时单击bind，然后放置您的输入。因此jQuery无法识别该事件，因此您的函数也不会被调用。

尝试使用动态绑定功能，例如：

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

或

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

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

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

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

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

使用.on()的语法，jQuery将处理父"div#Add"元素内的任何单击，并测试它是否发生在与第二个参数中的"#inconbutt"选择器匹配的元素上。如果是这样，就会调用您的函数。

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

或者，将$("#inconbutt").click(...)移到if语句中附加元素的位置。

与其每次单击复选框都追加和删除整个表，我建议将其始终包含在代码中，但显示和隐藏它。

您正在尝试将一个事件绑定到元素，但该元素还不存在。

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

使用jquery 的.on方法

$(document).on('click', '.button.clickable', function () {...});
相关文章：