與附加的innerHTML

問題我使用IE10與附加的innerHTML

<textarea id="answerText" name="answerText" placeholder="Your answer here..." onfocus="this.placeholder = \'\'" onblur="this.placeholder = \'Your answer here...\'">@answer.Text</textarea>

時有以下textarea的HTML幫助解決的佔位符文本值不使用佔位符值焦點dissapearing問題這是渲染爲預期的第一個答案但是當嘗試使用javascript追加第二個答案的textarea時，onfocus和onblur事件似乎不起作用，因爲當我點擊textarea時佔位符值仍然存在。這裏是我的代碼：

$('#answerList').append('<li><div class="row"><div class="eight columns"><textarea id="answerText" name="answerText" placeholder="Your answer here..." onfocus="this.placeholder = \'\'" onblur="this.placeholder = \'Your answer here...\'"></textarea></div><div class="four columns"><input type="checkbox" name="correctCheckbox" id="correctAnswerCheckbox' + answerPosition + '" value="' + answerPosition + '"/><label for="correctAnswerCheckbox' + answerPosition + '">Correct Answer</label></div></div></li>');

來源

2013-09-01 Jay

你有一個jsfiddle來證明這一點嗎？ – user1048676

您是否正在使用完全相同的ID創建新的textarea？每個元素的ID應該是唯一的。我建議你使用一個類，並將你的事件綁定到CSS類。你什麼時候添加新的textarea？如果它通過ajax，那麼你需要看看你是如何約束事件的。你應該使用一個函數，比如jquery的「on」函數，並且有一個始終在頁面上的父元素。但小提琴或更多的代碼將幫助 – TommyBs

聽起來像一個ID問題...檢查新生成的placeHolder有一個不同的ID比以前的（S） – ErickBest

試試這個：

var $newField = $('<li><div class="row"><div class="eight columns"><textarea class="answerText" name="answerText" placeholder="Your answer here..."></textarea></div></div></li>').appendTo('#answerList'); 
$newField = $newField.find('.answerText'); 
$newField.on('focus', function() { 
    $(this).attr('placeholder', ''); 
}); 
$newField.on('blur', function() { 
    $(this).attr('placeholder', 'Your answer here...'); 
});

林假設即使處理不得到的初始頁面渲染之後註冊的內聯。

我通常發現它更有效地管理我的js文件中的事件處理，而不是將它們內聯到dom中。因此，如果沒有使用內聯事件處理程序的特殊原因，則id建議不要。

編輯：

將類更改爲ID，如註釋中指出的那樣。

來源

2013-09-01 19:50:08 Anatol

如果你不希望你的代碼發生大的變化，你可以嘗試添加計數器，將一些如何給他們不同的ID：

var ctr=0; 

$('#answerList').append('<li><div class="row"><div class="eight columns"><textarea id="answerText'+crt+'" name="answerText" placeholder="Your answer here..." onfocus="this.placeholder = \'\'" onblur="this.placeholder = \'Your answer here...\'"></textarea></div><div class="four columns"><input type="checkbox" name="correctCheckbox" id="correctAnswerCheckbox' + answerPosition + '" value="' + answerPosition + '"/><label for="correctAnswerCheckbox' + answerPosition + '">Correct Answer</label></div></div></li>'); 

ctr++; /// ctr +1;

然後再添加循環CTR +1。

這裏假設重複是有效的，將解決ID問題。

，你應該有一個像500 textareas，如果你要撥打的第300，你可以這樣做： $('textarea[id*="300"]')

，或者如果你想打電話給所有的人都在別人的混合物

$('textarea[id*="answerText"]')

來源

2013-09-01 19:51:36 ErickBest

據我所知，一個placeholder的預期行爲是不會消失，直到輸入框中的東西。但是，如果你仍然想讓它顯示/隱藏焦點/模糊，我建議給textarea元素指定一些類，並綁定來自javascript代碼的焦點和模糊事件。

我做了這個fiddle來說明我的觀點。

<textarea id="answerText" name="answerText" placeholder="Your answer here..." class="answer">@answer.Text</textarea> 


$('#add').on('click', function(){ 
    $('<textarea class="answer" placeholder="text here" ></textarea>').appendTo('#answers'); 
}); 
//#answers is the container for the answers 
$('#answers').on('focus', '.answer', function(){ 
    this.placeholder = ''; 
}); 

$('#answers').on('blur', '.answer', function(){ 
    this.placeholder = 'text here'; 
});

通過這種方式，代碼將更具可支配性和解耦性，並且作爲副作用，您將避免您遇到的問題。

來源

2013-09-01 19:51:40 Matias

與附加的innerHTML

回答

相關問題