Passing data to an onclick event is decapitalizing the string

问题: Consider this fiddle: var test = $('#test'); var click = $('#click'); var data = [{ id: "gDDWdwewqeWEDQWE222wedEDDEW" }, { id: "232exEWXDWE23e21EDXXE!...

问题:

Consider this fiddle:

var test = $('#test');
var click = $('#click');
var data = [{
  id: "gDDWdwewqeWEDQWE222wedEDDEW"
}, {
  id: "232exEWXDWE23e21EDXXE!!@q"
}];

click.click(function() {
  var data = [{
    id: "gDDWdwewqeWEDQWE222wedEDDEW"
  }, {
    id: "232exEWXDWE23e21EDXXE!!@q"
  }];
  var html = '';
  for (var i = 0; i < data.length; i++) {
    var id = data[i].id;
    html += `<li id="${id}" onclick="anyFunction("${id}")">${id}</li>`
  }
  test.html(html);
  console.log(test.html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="test"></ul>
<button id="click">Click me</button>

Click on "Click me", then right-click on the ID and inspect it, you will see the expected ID outside onclick event while an unexpected one(decapitalized) inside it, there's also space right before the passed id inside onclick event. Check the pic below.

enter image description here

Any idea on why this behavior is occurring? Is it a bug or I'm doing something wrong?


回答1:

Looks like it's getting translated to lower case because your HTML string is not properly escaped - jQuery's html() will turn attribute and element names to lowercase:

$('body').html('<FOO BAR="BAZ"></FOO>');
console.log($('body').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

To fix it, turn anyFunction's string parameters into single-quotes rather than double-quotes:

var test = $('#test');
var click = $('#click');
var data = [{
  id: "gDDWdwewqeWEDQWE222wedEDDEW"
}, {
  id: "232exEWXDWE23e21EDXXE!!@q"
}];

click.click(function() {
  var data = [{
    id: "gDDWdwewqeWEDQWE222wedEDDEW"
  }, {
    id: "232exEWXDWE23e21EDXXE!!@q"
  }];
  var html = '';
  for (var i = 0; i < data.length; i++) {
    var id = data[i].id;
    html += `<li id="${id}" onclick="anyFunction('${id}')">${id}</li>`
  }
  test.html(html);
  console.log(test.html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="test"></ul>
<button id="click">Click me</button>

But inline handlers are terrible practice - it would be far better to attach the listeners properly using Javascript instead, which is not only better design-wise, but it'll also keep you from having to worry about escaping strings like that:

var test = $('#test');
var click = $('#click');
var data = [{
  id: "gDDWdwewqeWEDQWE222wedEDDEW"
}, {
  id: "232exEWXDWE23e21EDXXE!!@q"
}];

click.click(function() {
  var data = [{
    id: "gDDWdwewqeWEDQWE222wedEDDEW"
  }, {
    id: "232exEWXDWE23e21EDXXE!!@q"
  }];
  var html = '';
  for (var i = 0; i < data.length; i++) {
    const id = data[i].id;
    const li = $(`<li id="${id}">${id}</li>`);
    li.on('click', () => anyFunction(id));
    test.append(li);
  }
  console.log(test.html());
})
function anyFunction(arg) {
  console.log(arg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="test"></ul>
<button id="click">Click me</button>

  • 发表于 2018-07-05 12:06
  • 阅读 ( 295 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除