Javascript 使jQuery内部的自动完成可点击
我使用以下代码在jQuery自动完成项的右侧添加了一个链接:Javascript 使jQuery内部的自动完成可点击,javascript,jquery,autocomplete,click,Javascript,Jquery,Autocomplete,Click,我使用以下代码在jQuery自动完成项的右侧添加了一个链接: function onClientSelect(event, ui) { // My handling code goes here event.preventDefault(); } $("#mypage input[name='client']").autocomplete({ minLength: 1, appendTo: $(this).parent(), source: '/filt
function onClientSelect(event, ui) {
// My handling code goes here
event.preventDefault();
}
$("#mypage input[name='client']").autocomplete({
minLength: 1,
appendTo: $(this).parent(),
source: '/filter_client/',
select: onClientSelect,
focus: function (event, ui) {
event.preventDefault();
},
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
“我的服务器”以以下格式返回元素标签:
<div class="ac-item-lb">My Item Label</div>
<a class="ac-item-a" href="/url_to_go_to/" target="_blank">View Detail</a>
我想做的是在单击“查看详细信息”时在一个新选项卡中打开链接,单击任何其他区域都会像正常情况一样执行OnClient Select。但是,当前在链接上单击鼠标左键也会执行onClientSelect。打开链接的唯一方法是单击中间滚轮或鼠标右键,然后选择“在新选项卡中打开”
我尝试在带有event.stopImmediatePropagation的链接上附加一个click事件处理程序,但似乎不起作用。有人知道如何解决这个问题吗?一种方法是定义一个自定义的select函数,而不是使用一个。Amir,关于您的答案,我认为从select事件打开javascript函数内的窗口可能会被PopupBlocker阻止 PingXien422,您的服务器端应该返回Json而不是完整的html,如果您必须返回完整的html,请进行以下更改: 1.删除clientSelect功能 2.renderData函数中不需要“a”标记
$("#mypage input[name='client']").autocomplete({
minLength: 1,
appendTo: $(this).parent(),
source: '/filter_client/',
focus: function (event, ui) {
event.preventDefault();
},
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append( item.label )
.appendTo(ul);
};
尝试在onclick绑定到link中执行偶数.stopImmediatePropagation。页面正在打开,选择处理程序未执行
var li = $("<li></li>")
.data("item.autocomplete", item)
.append('<a class="ac-item-a" href="http://www.nba.com">' + item.label + '</a>')
.appendTo(ul);
li.find('a').bind('click', function(event){ event.stopImmediatePropagation() });
return li;
好的,jquery的事件优先于您的select事件——无论您做什么,都不能在那里停止任何操作。但您可以代理menuselect事件,然后决定是否应该调用它
你有没有想过在你的点击处理程序中加入一个条件,当它是那个链接的时候,就不会默认?如果测试元素是否应正常工作,则可以在默认值之前提前返回,然后链接应正常工作 以下是一个例子: 功能点击手柄{ //如果目标元素具有类“testclickable”,则 //函数将在'preventDefault'之前提前返回。 如果此.className.indexOf'test-clickable'!=-1{ 回来 } 警告“由于“preventDefault”,链接无法单击”; e、 防止违约; } $'a'。单击处理程序; a{ 显示:块; } a:以后{ 内容:'[class='attrclass']'; } 标题
没有人知道这一点???您使用的是jQuery autocomplete还是其他一些autocomplete插件?您提供了一种使用数组而不是服务器响应的方法?很好的解决方案-可以使用更多的CSS样式来说明这里发生了什么。我建议您将JSFIDLE编辑成以下内容:@sqsinger-谢谢您的风格设计,我已经编辑了答案并添加了您的小提琴。想法不错,但您为什么不让原生元素发挥作用呢。只需创建一个普通的超链接。没有黑客攻击,并且可以使用辅助技术:@RyanWheale-因为点击超链接将选择当前项目,而这正是他想要阻止的。
$("#mypage input[name='client']").autocomplete({
minLength: 1,
appendTo: $(this).parent(),
source: '/filter_client/',
focus: function (event, ui) {
event.preventDefault();
},
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append( item.label )
.appendTo(ul);
};
var li = $("<li></li>")
.data("item.autocomplete", item)
.append('<a class="ac-item-a" href="http://www.nba.com">' + item.label + '</a>')
.appendTo(ul);
li.find('a').bind('click', function(event){ event.stopImmediatePropagation() });
return li;
var ac = $("#mypage input[name='client']").autocomplete({
minLength: 1,
appendTo: document.body,
source: availableTags,
focus: function (event, ui) {
event.preventDefault();
},
}).data("ui-autocomplete");
ac._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<div>"+item.label+"<a class='link' href='http://test'>(http://test)</a></div>")
.appendTo(ul);
};
var ms = $._data(ac.menu.element.get(0), 'events').menuselect[0].handler;
ac.menu.element.off("menuselect");
ac.menu.element.on("menuselect", function (ev) {
if($(ev.originalEvent.target).hasClass("link"))
return;
ms.apply(this,arguments);
});