how to include inline onclick in jquery html string

Question

I am trying to add inline onclick event listener with html string which I am updating using jQuery html method but it doesn't seem to work,

it does not seem to add any click event listener also when I inspect element there is no onclick attribute seen.

Am I missing something here, can some one help?

var data = [{
  'a': 1,
  'b': 2
}, {
  'a': 10,
  'b': 3
}];
var str = '';

function sendData(e, data) {
  console.log(data);
}
data.forEach(function(item) {
  str += '<div onclick="' + sendData(item) + '">';
});
jQuery('.container').html(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

It is highly recommended to use the jQuery event delegation when you use jQuery anyway. It is NOT recommended to have inline event handlers. Instead use a data-attribute and delegation — mplungjan
– mplungjan, Commented Jul 6, 2018 at 7:55

Ankit Agarwal · Accepted Answer · 2018-07-06 07:57:27Z

2

You are concatenating the str incorrectly:

var data = [{'a':1, 'b':2},{'a':10, 'b':3}];
var e = 1;
var str = '';
function sendData(e, data){
  console.log(data);
}
data.forEach(function(item){
    str+="<div onclick=sendData("+ e + "," + JSON.stringify(item) + ")>click</div>";
});
jQuery('.container').html(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

answered Jul 6, 2018 at 7:57

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

Comments

manish · Accepted Answer · 2018-07-06 08:12:20Z

jQuery eases elements creation & DOM manipulation a lot :), with a very clean and readable way.

var data = [{id: 1, title: 'first div', class: 'red'}, {id: 2, title: 'second div', class: 'blue'}];
    data.forEach(function(item){
        jQuery('<div/>', {
                id: item.id,
                onclick: 'callMe(event)',
                class: item.class,
                title: item.title,
                text: 'Div id ' + item.id
              }).appendTo('.container');
    });
    
    function callMe(event){ alert('clicked ' + event.target.id); }

.red {
  color: red
}

.blue {
  color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">Main Div</div>

mplungjan · Accepted Answer · 2018-07-06 08:12:50Z

0

Here is a better way

var data = [{'a': 1,'b': 2}, {'a': 10,'b': 3}];
data.forEach(function(item,i) {
  $('.container').append($("<div/>",{ "class":"sendDiv","data-index":i}).text("click"));
});

$('.container').on("click",".sendDiv",function() { // delegation
  console.log(data[$(this).attr("data-index")]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

answered Jul 6, 2018 at 8:12

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Mohammed Swillam · Accepted Answer · 2018-07-06 08:14:22Z

Consider the following snippet

var data = [{'a':1, 'b':2},{'a':10, 'b':3}];

function sendData(e, data) {
  console.log(data);
}
data.forEach(function(item) {
  var $div = $("<div>").text("Click me!");
  $div.click(function(e) {
    sendData(e, JSON.stringify(item))
  });
  $(".container").append($div);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

and here is also a working jsfiddle example: https://jsfiddle.net/zL3nghs0/17/

As jQuery supports creating elements and adding event handlers is as simple as working with DOm elements, This is a more convenient (and the preferred) way than concatenation of string literals to your elements when working with jQuery.

Collectives™ on Stack Overflow

how to include inline onclick in jquery html string

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related