如何將jQuery添加到從ajax調用加載的html中？

我有這樣的一個jsp一個div：如何將jQuery添加到從ajax調用加載的html中？

<div id="response" class="response"> 
<h3>Connected as user : Tony</h3> 
<p>You selected the procedure : <B>lg_resultsretrieval</B></p> 
<div class="showbiz"> 
<label>Enter procedure input variables : </label></div> 
<div class="actual-input"> 
<label>Parameter1: </label><textarea name='text1' id='text1' class='txtarea' rows='1' cols='50'>starttime - timestamp without time zone</textarea><br> 
<label>Parameter2: </label><textarea name='text2' id='text2' class='txtarea' rows='1' cols='50'>endtime - timestamp without time zone</textarea><br> 
<label>Parameter3: </label><textarea name='text3' id='text3' class='txtarea' rows='1' cols='50'>in_sourceindicator - integer</textarea><br> 
<label>Parameter4: </label><textarea name='text4' id='text4' class='txtarea' rows='1' cols='50'>keyword - character varying</textarea><br> 
</div> 
</div>

我寫了一個jQuery函數的文字區域的：

<div id="response" class="response"></div>

這個div，使一個AJAX調用一個servlet後，作爲附加如下：

//submits only when the textbox value is valid 
    $("#response").on("change", function() { 
       $("#Execute").click(function() { 
        if ($(".txtarea").val() == this.defaultValue) 
        { 
         alert("Please insert a valid value"); 
         return false; 
        } 
       }); 

       $("txtarea") 
       .focus(function() { 
        if (this.value === this.defaultValue) { 
         console.log('inside focus function'); 
         this.value = ''; 
        } 
       }) 
       .blur(function() { 
        if (this.value === '') { 
         this.value = this.defaultValue; 
        } 
      });  
      });

問題是，上面的代碼不雖然jquery的文檔中工作，它表示對函數用於動態加載的Elemen TS。我如何使它工作？請建議

來源

2014-03-12 Karthik

1）不存在與元素的id'Execute' 2）沒有標籤'txtarea'的元素 – Justinas

DIVS沒有變化事件。 – epascarello

@epascarello：儘管如此，'change'事件似乎傳播到子元素的'div'元素。在這種情況下'textarea'元素。也許這是特定於瀏覽器的行爲？值得測試，我想。 – David

首先你有div與id響應。然後在附加HTML後這個div可以綁定添加HTML的所有類似的jQuery的事件：

$("#response").on(EventName,htmlDom, function() { 
       //to do your code 
     });

例如，對於textarea的嘗試是這樣的：

$("#response").on("focus","textarea", function() { 
     //to do your code 
});

來源

2014-03-12 12:18:55

最快的回答..謝謝 – Karthik

然而，佔位符解決了這個問題。所有的代碼根本不需要。無論如何感謝Thanx。 – Karthik

這不會對動態添加element.use工作：

$(document).on("change",'"#response"', function() { 
    //code here 
});

來源

2014-03-12 12:16:37

如果div本身是在DOM被替換，那麼確實連接到該div任何處理器都將丟失。注意：您怎麼會在這裏的附加處理程序：

$("#response").on("change", function() { 
    // code 
});

這直接連接處理程序的div因爲當$("#response")選擇評估存在。處理程序附加到元素，而不是動態選擇器。爲了保留添加/替換元素的處理程序，您需要綁定到父元素並篩選目標元素。事情是這樣的：

$(document).on("change", "#response", function() { 
    // code 
});

這將處理程序綁定到document對象，不改變這樣的處理程序也不會丟失作爲子元素而改變。（僅供參考，實際上我昨天是just blogged about this。）

來源

2014-03-12 12:18:43 David

很好的解釋兄弟！ Thanx – Karthik

很好的解釋和不錯的發貼人..... 1 :) –

如何將jQuery添加到從ajax調用加載的html中？

回答

相關問題