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

まだ存在していない要素にイベントハンドラーを直接バインドすることはできません。ただし、後で作成される要素の親要素にバインドされた委任イベントハンドラーを使用できます。

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

の構文を使用すると.on()、jQueryは親要素内のクリックを処理し、2番目のパラメーターのセレクター"div#Add"と一致する要素でクリックが発生したかどうかをテストします。"#inconbutt"それが行われる場合、関数が呼び出されます。

1.7より古いバージョンのjQueryを使用している場合は、の.delegate()代わりにを使用して.on()ください。1.4.2より古いバージョンを使用している場合は、を使用してください.live()

または、要素を追加するステートメント$("#inconbutt").click(...)内でに移動します。if

チェックボックスがクリックされるたびにテーブル全体を追加および削除するのではなく、常にコードに含めて表示および非表示にすることをお勧めします。

于 2012-08-24T06:39:35.180 に答える
1

まだ存在していない要素にイベントをバインドしようとしています。

使用してみてください$(document).on('click', '#inconbutt', function() { ... });

于 2012-08-24T06:36:23.203 に答える
1

ロードの開始時に.clickatbindで作成した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 に答える