How to attribute value to jquery click function

Question

I want to pass id value of an element to a jquery click function .

Here is the code snippet

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");
  }

<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>

I want to pass id value "buttonMain" to " buttonClicked" function ,

This is what I tried


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);
  }

I am new to jquery, please feel free to correct me

karansys
– karansys

2020-02-10 11:23:12 +00:00
Commented Feb 10, 2020 at 11:23 — karansys
– karansys, Commented Feb 10, 2020 at 11:23
Change function(this.id) { to function() {

Felix Kling
– Felix Kling

2020-02-10 11:26:00 +00:00
Commented Feb 10, 2020 at 11:26 — Felix Kling
– Felix Kling, Commented Feb 10, 2020 at 11:26

Barmar · Accepted Answer · 2020-02-10 11:26:40Z

6

this.id should not be in the function parameter list. this is passed implicitly, the first argument to a click handler function is the Event object.

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);
}

<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>

answered Feb 10, 2020 at 11:26

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to attribute value to jquery click function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related