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

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右键单击，检查clicked元素是否为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
});