admin管理员组文章数量:1302361
I am using jQuery autoplete which is working fine with existing element but not with dynamically added element.
Here is my autoplete code (Which I have changed a bit)
$(function() {
(function( $ ) {
$.widget( "uibobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( ".editableCombobox" ) // your input box
//.insertAfter( select )
.val( value )
.autoplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autoplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autoplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "$1" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autoplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
//if ( !valid ) {
// remove invalid value, as it didn't match anything
//$( this ).val( "" );
//select.val( "" );
//input.data( "autoplete" ).term = "";
//return false;
// }
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autoplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autoplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
this.button = $( "<button type='button'> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
//.addClass( "ui-corner-right ui-button-icon" )
.live('click',function() {
// close if already visible
if ( $(this).prev().autoplete( "widget" ).is( ":visible" ) ) {
$(this).prev().autoplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
$(this).prev().autoplete( "search", "" );
$(this).prev().focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
$( "#bobox" )bobox();
$( "#toggle" ).live('click',function() {
$( "#bobox" ).toggle();
});
});
Here is my code which adds new element
var selectedRow = $('#contactGroup'+rowId);
var clonedRow = selectedRow.clone();
selectedRow.after(clonedRow);
After reading many similar questions I think .live might help but not sure where to use it.
EDIT:
I tried removing live.
New code for Autoplete
$(function() {
(function( $ ) {
$.widget( "uibobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( ".editableCombobox" ) // your input box
//.insertAfter( select )
.val( value )
.autoplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autoplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autoplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "$1" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autoplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
//if ( !valid ) {
// remove invalid value, as it didn't match anything
//$( this ).val( "" );
//select.val( "" );
//input.data( "autoplete" ).term = "";
//return false;
// }
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autoplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autoplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
this.button = $( "<button type='button'> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-button-icon" )
.click(function() {
// close if already visible
if ( $(this).prev().autoplete( "widget" ).is( ":visible" ) ) {
$(this).prev().autoplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
$(this).prev().autoplete( "search", "" );
$(this).prev().focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
$( "#bobox" )bobox();
$( "#toggle" ).click(function() {
$( "#bobox" ).toggle();
});
});
Binding newly added element in clone method
var selectedRow = $('#contactGroup'+rowId);
var clonedRow = selectedRow.clone();
selectedRow.after(clonedRow);
$(('#contactGroup'+rowId) .editableCombobox).autoplete( "search", "" );
I am using jQuery autoplete which is working fine with existing element but not with dynamically added element.
Here is my autoplete code (Which I have changed a bit)
$(function() {
(function( $ ) {
$.widget( "ui.bobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( ".editableCombobox" ) // your input box
//.insertAfter( select )
.val( value )
.autoplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autoplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autoplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "$1" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autoplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
//if ( !valid ) {
// remove invalid value, as it didn't match anything
//$( this ).val( "" );
//select.val( "" );
//input.data( "autoplete" ).term = "";
//return false;
// }
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autoplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autoplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
this.button = $( "<button type='button'> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
//.addClass( "ui-corner-right ui-button-icon" )
.live('click',function() {
// close if already visible
if ( $(this).prev().autoplete( "widget" ).is( ":visible" ) ) {
$(this).prev().autoplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
$(this).prev().autoplete( "search", "" );
$(this).prev().focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
$( "#bobox" ).bobox();
$( "#toggle" ).live('click',function() {
$( "#bobox" ).toggle();
});
});
Here is my code which adds new element
var selectedRow = $('#contactGroup'+rowId);
var clonedRow = selectedRow.clone();
selectedRow.after(clonedRow);
After reading many similar questions I think .live might help but not sure where to use it.
EDIT:
I tried removing live.
New code for Autoplete
$(function() {
(function( $ ) {
$.widget( "ui.bobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( ".editableCombobox" ) // your input box
//.insertAfter( select )
.val( value )
.autoplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autoplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autoplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "$1" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autoplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
//if ( !valid ) {
// remove invalid value, as it didn't match anything
//$( this ).val( "" );
//select.val( "" );
//input.data( "autoplete" ).term = "";
//return false;
// }
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autoplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autoplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
this.button = $( "<button type='button'> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-button-icon" )
.click(function() {
// close if already visible
if ( $(this).prev().autoplete( "widget" ).is( ":visible" ) ) {
$(this).prev().autoplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
$(this).prev().autoplete( "search", "" );
$(this).prev().focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
$( "#bobox" ).bobox();
$( "#toggle" ).click(function() {
$( "#bobox" ).toggle();
});
});
Binding newly added element in clone method
var selectedRow = $('#contactGroup'+rowId);
var clonedRow = selectedRow.clone();
selectedRow.after(clonedRow);
$(('#contactGroup'+rowId) .editableCombobox).autoplete( "search", "" );
- Whats the problem? Do you get an error? Where are you enabling the automplete for the cloned row?` – Jan Commented Nov 21, 2011 at 11:39
- @Jan: I tried Thorsten answer. The events are not bind to Autoplete. – Ajinkya Commented Nov 21, 2011 at 12:10
- Can you show a plete example? Again: How do you bind autoplete to your cloned inputs? Thorstens jsFiddle works for me! – Jan Commented Nov 21, 2011 at 12:13
2 Answers
Reset to default 9You can't use 'live' on autoplete, as far as I know.
Place your autoplete options in a function that expects the field as parameter, on which you want to apply the autoplete method.
function enable_autoplete(InputField) {
$(InputField).autoplete({
source: availableTags
});
}
Then, after cloning the field, call this function with the cloned field.
enable_autoplete(ClonedField);
I've written you an easy example, what makes it much easier to understand what I am trying to say ;-)
Edit: I've written another example based on the bobox example from jQueryUIs website.
You can use 'live', although these days you should be using the 'on' method.
See this thread for working examples (including one that uses 'on' if you drill down in to some of the hidden answers): Bind jQuery UI autoplete using .live()
Cheers Matt
本文标签： javascriptApply jQuery autocomplete to cloned elementStack Overflow
版权声明：本文标题：javascript - Apply jQuery autocomplete to cloned element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741640568a2389893.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论