1

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

4 回答 4

1

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

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

于 2012-08-24T06:36:23.203 回答
1

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

$("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语句中。

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

于 2012-08-24T06:39:35.180 回答
1

您在加载开始时使用 .click 创建的 jQuery 函数绑定，然后您的输入被放置。因此 jQuery 无法识别该事件并且您的函数不会被调用。

尝试使用动态绑定函数，例如：

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

或者

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

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

$.on('click', /*selector*/, function(){
  //your function
});
于 2012-08-24T06:43:21.110 回答
0

.onjquery的使用方法

$(document).on('click', '.button.clickable', function () {...});
于 2012-08-24T06:42:12.760 回答