我试图通过ajax进行jQuery的jQuery,并通过ajax进行事件绑定,类似于以下方式:事件绑定在动态创建的元素上?
但是,我对java/jquery不太好,我似乎无法让jQuery从事Ajax内容。我从此代码开始:
(function($){
function floatLabel(inputType){
$(inputType).each(function(){
var $this = $(this);
var text_value = $(this).val();
// on focus add class "active" to label
$this.focus(function(){
$this.next().addClass("active");
});
// on blur check field and remove class if needed
$this.blur(function(){
if($this.val() === '' || $this.val() === 'blank'){
$this.next().removeClass();
}
});
// Check input values on postback and add class "active" if value exists
if(text_value!==''){
$this.next().addClass("active");
}
});
// Automatically remove floatLabel class from select input on load
//$( "select" ).next().removeClass();
}
// Add a class of "floatLabel" to the input field
floatLabel(".floatLabel");
});
我试图绑定这样的事件:
(function($){
var $this = $('.floatLabel');
var text_value = $('.floatLabel').val();
$('.container').on('focus', '.floatLabel', function floatLabel(inputType){
$(inputType).each(function(){
$this.next().addClass('active');
if(text_value!==''){
$this.next().addClass('active');
}
});
});
$('.container').on('blur', '.floatLabel', function floatLabel(inputType){
$(inputType).each(function(){
if($this.val() === '' || $this.val() === 'blank'){
$this.next().removeClass();
}
});
});
})(jQuery);
这是HTML的主要页面:
<div class="container">
<div id="ha">
<script type="text/javascript">
$( document ).ready(function() {
$('#ha').load('example.com/createform');
});
</script>
</div>
</div>
加载内容:
<div >
<input class="floatLabel" name="example">
<label for="example">example</label>
</div>
这似乎用$(document).ajaxComplete (function (){
解决,只是复制原始代码。感谢大家的帮助!