javascript - 在对象内使用 jquery click 事件

我想向 <span> 添加点击事件在 DOM 中，但点击事件位于对象中

我有这个html

<html>
<body>
   <span id="meToLog">hello-world </span>
  </body>

 <script>
  function makeObj(){
   this.logMe= $("#meToLog").click(function(){
     console.log("shoot")
    }) 
   }
   const obj = new makeObj()
     obj.logMe // i want this to listen to click event 


   </script>
</html>

最佳答案

正如我在评论中提到的，问题在于您在构造函数的属性 logMe 中存储的内容。 click() 方法返回一个 jquery 对象，在本例中是 span，但单击处理程序从未附加到它。

http://api.jquery.com/click/

您的构造函数中现在的内容是:

function makeObj(){
  this.logMe= $("#meToLog").click(function(){
    console.log("shoot")
  }) 
}

const myObj = new makeObj();
// test what logMe is
console.log(myObj.logMe); // returns the jquery object [span#meToLog]

一种解决方案是将您的 logMe 属性转换为方法，以便将点击处理程序附加到元素:

function makeObj(){
  this.logMe= function(){
    $("#meToLog").click(function(){
      console.log("shoot")
    });
  }
}

// create a new instance
const myObj = new makeObj();
// attach the click handler
myObj.logMe();
// now click on the span and the log should be there

这个示例似乎可以满足您的要求:

https://jsfiddle.net/ndkzjdyb/

<小时/>

我忘了提到，由于函数是 javascript 中的第一类对象，因此您可以将 id 字符串和特定处理程序传递给构造函数方法，以使其更加动态。检查 fiddle 的此版本:

https://jsfiddle.net/ndkzjdyb/2/

<小时/>