2013-08-27 82 views
1

HTML複選框選中生成或點擊我已經被JS所產生的複選框事件綁定

anwsersCount = question.ChoiceQuestionAnwsers().length; 
questionBodyContainer = document.getElementById('questionBody'); 
      //self.ChoosedQuestionAnwsers = question.ChoiceQuestionAnwsers; 
      for (var i = 0; i < anwsersCount; i++) { 
       var newOption = document.createElement("input"); 
       var newOptionLabel = document.createElement("label"); 
       newOption.type = "checkbox"; 
       newOption.id = i; 
       newOption.value = i; 
       newOptionLabel.for = i; 
       newOptionLabel.setAttribute("style", "margin-left: 5px"); 
       newOption.onclick = function(event) { 
        alert('alert'); 
       }; 
       newOptionLabel.innerHTML = question.ChoiceQuestionAnwsers()[i].Text; 
       // questionBodyContainer.innerHTML += question.ChoiceQuestionAnwsers()[i].Text + "<p>"; 
       // questionBodyContainer.appendChild(newOption); 
       questionBodyContainer.appendChild(newOption); 
       questionBodyContainer.appendChild(newOptionLabel); 
       questionBodyContainer.innerHTML += "<p>"; 

       //self.ChoosedQuestionAnwsers.push(question.ChoiceQuestionAnwsers()[i]); 
      } 

和onclick事件的生成複選框不到風度的工作。你有什麼想法如何使它工作?

回答

0

儘量結合他們在創建他們都:

anwsersCount = 5; 
questionBodyContainer = document.getElementById('questionBody'); 

for (var i = 0; i < anwsersCount; i++) { 
    var newOption = document.createElement("input"); 
    var newOptionLabel = document.createElement("label"); 
    newOption.type = "checkbox"; 
    newOption.id = i; 
    newOption.value = i; 
    newOptionLabel.for = i; 
    newOptionLabel.setAttribute("style", "margin-left: 5px"); 
    newOptionLabel.innerHTML = "Dummie Text"; 
    questionBodyContainer.appendChild(newOption); 
    questionBodyContainer.appendChild(newOptionLabel); 
    questionBodyContainer.innerHTML += "<p>"; 
} 

checks = questionBodyContainer.getElementsByTagName("input"); 
for (var i = 0; i < checks.length; i++) 
{ 
    checks[i].addEventListener('click', function() { 
      alert(this.getAttribute("id")); 
    }); 
} 

http://jsfiddle.net/LGcVU/

編輯:它在for循環內部不起作用的原因是因爲在更新DOM後使用innerHTML屬性。如果你必須添加一個新的段落,不通過屬性添加它,以同樣的方式將其添加添加其他元素:

anwsersCount = 5; 
questionBodyContainer = document.getElementById('questionBody'); 
for (var i = 0; i < anwsersCount; i++) { 
    var newOption = document.createElement("input"); 
    var newOptionLabel = document.createElement("label"); 
    newOption.type = "checkbox"; 
    newOption.id = i; 
    newOption.value = i; 
    newOptionLabel.for = i; 
    newOptionLabel.setAttribute("style", "margin-left: 5px"); 
    newOptionLabel.innerHTML = "Dummie Text"; 
    questionBodyContainer.appendChild(newOption); 
    questionBodyContainer.appendChild(newOptionLabel); 
    questionBodyContainer.appendChild(document.createElement("p")); 
    newOption.addEventListener('click', (function() 
             { 
              alert(this.getAttribute("id")); 
             }), false); 
} 

http://jsfiddle.net/hescano/LGcVU/4/

+0

完善!謝謝:)你能解釋一下爲什麼在新循環內工作嗎?我在學習JS :) – duch1989

+0

循環內部不起作用的原因是因爲在DOM中添加元素之後,通過添加帶有innerHTML屬性的新段落來修改DOM。刪除它,你應該能夠在for循環中添加事件監聽器。 http://jsfiddle.net/hescano/LGcVU/2/ –

+0

你可以看看我的編輯。 –

0

更換

newOption.onclick = function(event) { 
        alert('alert'); 
       }; 

有了:

newOption.addEventListener('click', function() { 
    alert('alert'); 
}); 
+0

我嘗試這樣做,沒有工作;/ – duch1989