Add onClick with self input parameter of a jQuery object?

Question

Desired output in HTML:

<input onclick="someFunction(this)"/>

Attempt:

var input = $("<input/>");
input.attr("onclick", "someFunction(this)");
$("#body").append(input)

Result:

<input onclick="[object Object]"/>

I have tried using:

input.click({param: "this"}, someFunction);

I have also tried replacing "this" with "input". No luck.

jQuery is not a requirement, however I need this done dynamically. The above is just a sample, the actual object has more attributes.

I attempted examples from here and derivations from there, however I am still unable to figure it out. I keep getting the same result as above. — adam
– adam, Commented Sep 29, 2020 at 19:36
You can forward the event target to the function call using a lambda expression: input.on('click', e => someFunction(e.target)) Why does it matter whether you render an attribute or create the listener in memory? — Mr. Polywhirl
– Mr. Polywhirl, Commented Sep 29, 2020 at 19:36

Anton · Accepted Answer · 2020-09-29 19:49:28Z

2

All is working from the box...

Here is example. Just click on input

var input = $("<input/>");
input.attr("onclick", "someFunction(this)");
$("#body").append(input);

function someFunction(obj) {
  $('#result').css('color', 'red');
  console.log(obj);
}

$('#result').text(input[0].outerHTML);

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

<body id="body">
  <div>This is your code:</div>
  <div id="result"></div>
</body>

And you can also use pure jQuery. The $(this) is what you need.

var input = $("<input id=\"xxx\"/>");
input.click(function() {
  const theInput = $(this);
  console.log(theInput[0]);
});
$("#body").append(input);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="body"></body>

edited Sep 29, 2020 at 19:49

answered Sep 29, 2020 at 19:41

Anton

2,7231 gold badge9 silver badges15 bronze badges

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

Comments

Mr. Polywhirl · Accepted Answer · 2020-09-29 19:49:51Z

You could create the listener in-memory instead of adding the handler as an attribute. This version lets you wrap your event target in a jQuery object ahead of the function call.

const someFunction = ($element) => {
  console.log($element.prop('class'));
}

const $input = $('<input>', { class: 'foo' })
  .on('click', (e) => someFunction($(e.target)))
  .appendTo('body');

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

But if you really need to add it as an attribute, you could do the following.

const someFunction = (element) => {
  console.log($(element).prop('class'));
}

const $input = $('<input>', { class: 'foo' })
  .attr('onclick', 'someFunction(this)')
  .appendTo('body');

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

m1k1o · Accepted Answer · 2020-09-29 19:37:51Z

1

Use arrow function, this will be inherited.

input.on('click', () => someFunction(this))

answered Sep 29, 2020 at 19:37

m1k1o

2,36416 silver badges27 bronze badges

3 Comments

Mr. Polywhirl Over a year ago

Be aware that the lambda does not redefine this so you are good, but if you used input.on('click', function() { someFunction(this) }), you would have a scoping problem.

m1k1o Over a year ago

Ofc, yes. That's the glory of arrow functions.

Anton Over a year ago

In your example this will be not an input, maybe you wanted: input.on('click', () => someFunction(input))?

Collectives™ on Stack Overflow

Add onClick with self input parameter of a jQuery object?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related