2012-01-07 117 views
0

好吧,我對這個牆上,所以任何幫助非常感激。JQuery焦點不工作通過新的1.7.1 .on()方法爲Ajax返回HTML

我有一個HTML輸入字段:

(ID爲:#data_input),這是通過Ajax調用返回。

然後我檢查表格是否在#data_input字段提交輸入。

(注意:我在的jQuery V1.7.1)

如果不輸入任何更改字段的CSS通過它突出紅色:

$('#data_input').css('background-color','red') 

和工作正常所以我可以瞄準它。但是,我再碰上一個問題,當我試圖撤消當用戶通過進入該領域的紅色背景:

$('#data_input').on('focus', function(){$(this).css('background-color','white')}); 

,但我什麼也沒得到,任何想法?

.live().focus()也不要工作:(

+0

你是說'.css()'調用成功_after_字段是通過ajax加載?如果您已將'.on()'調用放入ajax的成功回調函數中,它應該可以正常工作。在焦點函數中嘗試'console.log()'而不是設置css,以確認函數是否被調用。並且請多顯示一下你的代碼,特別是你已經顯示的行的上下文。 – nnnnnn 2012-01-07 01:44:56

回答

1

編輯:更新到在動態元素上使用.on。

相同的情況下對我的作品。請參見DEMO這裏的代碼如下,

HTML:

<div id="result" ></div> 

JS:

$('#result').on ('focus', '#input_field', function() { 
    $(this).css ('background-color', 'white'); 
}); 

$('#result').on ('click', '#submit', function() { 
    if ($('#input_field').text() == '') { 
     $('#input_field').css ('background-color', 'red'); 
    } 
}); 

//added to dom after the binding. see above code. 
$('#result').append('<input type="text" value="" id="input_field" />' + 
        '<input type="button" value="Submit" id="submit" />'); 
+0

不錯的演示,但這不是相同的情況,因爲你的輸入是從頁面開始的,而OP的是通過ajax加載的。 – nnnnnn 2012-01-07 01:56:58

+0

@nnnnnn - 更新了我的代碼..我錯過了AJAX部分。 – 2012-01-07 02:32:22

+0

這是更多的東西。 +1。 – nnnnnn 2012-01-07 02:37:17

0
  1. 看看你寫了野外工作的代碼不是由AJAX返回。
  2. 我假設你已經檢查,以確保重點函數被調用。在所有
  3. 嘗試一個onchange處理器
  4. 通過.addClass()
  5. 需求你的錢回來試試你的CSS。)
  6. Try .focus(function(){});
0

試試這個:

$(document).on('focus', '#data_input', function(){$(this).css('background-color','white')});