如何将值赋予jquery点击功能

kar*_*sys 4 html javascript css jquery

我想将元素的 id 值传递给 jquery 单击函数。

这是代码片段

function maintest() {
   var buttonElem = $('<button>').attr({"id" : "buttonMain" }).css ({"cursor" :"pointer"}).text("Click me!").click(function() {
      buttonClicked ();
   });
   
   $("#mainDiv").append(buttonElem);
  }
   
  
  function  buttonClicked () {
    alert("button clicked");
  }
Run Code Online (Sandbox Code Playgroud)
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body onload ="maintest()">
  <div id="mainDiv"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我想将 id 值“buttonMain”传递给“buttonClicked”函数,

这是我试过的


function maintest() {
   var buttonElem = $('<button>').attr({"id" : "buttonMain" }).css ({"cursor" :"pointer"}).text("Click me!").click(function(this.id) {
      buttonClicked (this.id);
   });

   $("#mainDiv").append(buttonElem);
  }


  function  buttonClicked (elem) {
    alert("button clicked");
    alert("passed elem id value"+ elem);
  }
Run Code Online (Sandbox Code Playgroud)

Bar*_*mar 6

this.id不应在函数参数列表中。this隐式传递,点击处理函数的第一个参数是Event对象。

function maintest() {
  var buttonElem = $('<button>').attr({
    "id": "buttonMain"
  }).css({
    "cursor": "pointer"
  }).text("Click me!").click(function() {
    buttonClicked(this.id);
  });

  $("#mainDiv").append(buttonElem);
}

function buttonClicked(elem) {
  console.log("button clicked");
  console.log("passed elem id value "+ elem);
}
Run Code Online (Sandbox Code Playgroud)
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body onload="maintest()">
  <div id="mainDiv"></div>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)