使jQuery内的<a>自动完成可点击

Question

使jQuery内的<a>自动完成可点击

pin*_*422 25 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: '/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);
};

Run Code Online (Sandbox Code Playgroud)

我的服务器以这种格式返回元素标签:

<div class="ac-item-lb">My Item Label</div>
<a class="ac-item-a" href="/url_to_go_to/" target="_blank">View Detail</a>

Run Code Online (Sandbox Code Playgroud)

我想要做的是当我点击"查看详细信息"时打开新选项卡中的链接,单击任何其他区域就像正常一样执行onClientSelect.但是,当前左键单击链接也会执行onClientSelect.打开链接的唯一方法是单击中间滚轮或鼠标右键,然后选择"在新选项卡中打开".

我尝试使用event.stopImmediatePropagation()在链接上附加一个click事件处理程序,但这似乎不起作用.有谁知道如何解决这个问题？

Answer 1

Ami*_*ich 21

一种方法是定义一个自定义select函数,而不是使用<a>链接

HTML:

<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>

Run Code Online (Sandbox Code Playgroud)

JS:

 var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];

$("#tags").autocomplete({
    source: availableTags,
    select: function (event, ui) {
        var elem = $(event.originalEvent.toElement);
        if (elem.hasClass('ac-item-a')) {
            var url = elem.attr('data-url');
            event.preventDefault();
            window.open(url, '_blank ');
        }
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append('<a>' + item.label + '<span class="ac-item-a" data-url="http://www.nba.com"> View Details</span></a>')
        .appendTo(ul);
};

Run Code Online (Sandbox Code Playgroud)

JSFIDDLE.

Answer 2

pse*_*ant 5

你有没有想过在你的点击处理程序中添加一个条件而不是 preventDefault它是什么链接？如果您测试元素是否应该正常运行,那么您可以return在此之前提前preventDefault,然后链接应该正常运行.

这是一个例子(JSBin):

function clickHandler(e) {
  // If the target element has the class `test-clickable` then the
  // function will return early, before `preventDefault`.
  if (this.className.indexOf('test-clickable') !== -1) {
    return;
  }

  alert('That link is not clickable because of `preventDefault`');
  
  e.preventDefault();
}

$('a').click(clickHandler);

Run Code Online (Sandbox Code Playgroud)

a {
  display: block;
}
a:after {
  content: ' [class=' attr(class)']';
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <a class='test-clickable' href='http://www.google.com' target='_blank'>Link</a>
  <a class='test-not-clickable' href='http://www.google.com' target='_blank'>Link</a>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，4 月前
查看次数：	4140 次
最近记录：	10 年，4 月前