Question

我有一段很好的代码，但是它只处理一个ID（标题11）。问题是我可以有很多ID（headline11，headline12，headline13等）。我可以获得右键单击的元素的ID，请在https://jsfiddle.net/yagami889/xpvt214o/471009/处查看我的小提琴，但是我无法使其在我的代码段中起作用，我遇到了许多jQuery错误。这是我从测试开始要做的事情：

var idHeadline = "";

$('input').contextmenu(function() { 
            idHeadline = $(this).attr('id');
        });

$("#" + idHeadline).on("contextmenu",function(e){
  e.preventDefault();
  $("#cntnr").css({"left": e.pageX-3, "top": e.pageY-3});
  $("#cntnr").fadeIn(200, startFocusOut);

});

function startFocusOut(){
  $("#cntnr").on("click",function(){
  $("#cntnr").hide();        
  $("#cntnr").off("click");
  });
}

$("#items > li").click(function(){
$("#" + idHeadline).val($(this).text().replace("fallback", " "));
var input1 = $("#" + idHeadline);
setInputSelection(input1, 9, 10);
});

这是工作代码：

$("#headline11").on("contextmenu",function(e){
  e.preventDefault();
  $("#cntnr").css({"left": e.pageX-3, "top": e.pageY-3});
  $("#cntnr").fadeIn(200, startFocusOut);

});

function startFocusOut(){
  $("#cntnr").on("click",function(){
  $("#cntnr").hide();        
  $("#cntnr").off("click");
  });
}

$("#items > li").click(function(){
$("#headline11").val($(this).text().replace("fallback", " "));
var input1 = $("#headline11");
setInputSelection(input1, 9, 10);
});

谢谢您的帮助，

Answer 1

请改用事件委托，以便您可以听整个document上的右键单击，检查单击的元素是否为input，如果是，则运行适当的功能，否所需的ID：

$(document).on("contextmenu", 'input[id^="headline"]', function(e){
  e.preventDefault();
  console.log('running some function');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="headline11" type="text" />
<input id="headline12" type="text" />
<input id="notaheadline" type="text" />

对于您的items侦听器，您可以执行相同的操作-仅添加一个侦听器，而不要添加多个侦听器：

$("#items").on("click", 'li', function(){
  $(this).val($(this).text().replace("fallback", " "));
  // etc
});

Javascript：捕获右键单击元素的ID

1 个答案: