0

動的な mcq の質問を作成していますが、テキスト ボックスの ID を取得する際に問題が発生しています。以下のようにjqueryを使用してIDをテストします

<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>

<body>
<script type="text/javascript">
var counter1 = 1;//mcq
var counter = 2;//question
$(document).ready(function(){

$("#Q2choice1").click(function (){
    alert ("dsa");
});

$("#addQuestion").click(function () {

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Q'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >' + '</br>' + 
      '<input type="radio" onclick="disable(this);" />'+
      '<input type="text" id="Q'+counter+'choice1" placeholder="Option' + counter1 +' Q'+ counter +'" ">' +
      '<input type="button" value="Add Option" id="Q'+ counter +'">');

newTextBoxDiv.appendTo("#TextBoxesGroup");
alert(counter);
counter++;
 });

 $("#removeQuestion").click(function () {
if(counter==1){
      alert("No question that can be deleted");
      return false;
   }   

counter--;

    $("#TextBoxDiv" + counter).remove();

 });

 //$("#getButtonValue").click(function () {

// var msg = '';
//for(i=1; i<counter; i++){
 // msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
//}
//      alert(msg);
 //});
});

function disable(element){
element.checked=false;
}

</script>


</head>

ここにhtmlがあります

<body>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Q1 : </label><input type='textbox' id='textbox1' ></br>
    <div id="optionList1">
    <input type='radio' onclick="disable(this);" /> <input type='text' id='Q1choice1' value='' placeholder='option1Q1'>
    <input type='button' value='Add Option' name='1' class="inner" id='Q1'>
    </div>
</div>
</div>
<input type='button' value='Add Question' id='addQuestion'>
<input type='button' value='Remove Question' id='removeQuestion'>

</body>
</html>

私はクリック機能を使用し、アラートを使用してIDが存在することを確認します。問題は、次の質問を作成して置くときです

$("#Q2choice1").click(function()

私のIDが存在しないことを意味するアラートはありません。私のjqueryの問題は何ですか?

4

2 に答える 2

2

.click()はまだ存在しないため、適用されて$("#Q2choice1")いません。.on()( http://api.jquery.com/on/ )のイベント委任バージョンを使用して、リスナーが確実にアタッチされるようにします。

交換：

$("#Q2choice1").click(function (){
    alert ("dsa");
});

と：

$('body').on('click', '#Q2choice1', function () {
     alert("DSA");
});

body 要素にリスナーを適用することで、確実にアタッチされます。次に、存在するかどうかに関係なく、必要な要素に委任します。

例: http://jsfiddle.net/hr7nR/

于 2013-11-14T13:26:11.347 に答える
0

これを見てください：

http://jsfiddle.net/x6Dcj/1/

要素を 1 つだけ変更しました

var counter1 = 1;//mcq
var counter = 2;//question
$(document).ready(function(){

$("#Q2choice1").click(function (){
    alert ("dsa");
});

$("#addQuestion").click(function () {

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.append().html('<label>Q'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >' + '</br>' + 
      '<input type="radio" onclick="disable(this);" />'+
      '<input type="text" id="Q'+counter+'choice1" placeholder="Option' + counter1 +' Q'+ counter +'" ">' +
      '<input type="button" value="Add Option" id="Q'+ counter +'">');

newTextBoxDiv.appendTo("#TextBoxesGroup");
alert(counter);
counter++;
 });

 $("#removeQuestion").click(function () {
if(counter1==1){
      alert("No question that can be deleted");
      return false;
   }   

counter--;

    $("#TextBoxDiv" + counter).remove();

 });

 //$("#getButtonValue").click(function () {

// var msg = '';
//for(i=1; i<counter; i++){
 // msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
//}
//      alert(msg);
 //});
});

function disable(element){
element.checked=false;
}
于 2013-11-14T13:27:03.467 に答える