jQuery通过内联onclick传递对象

Question

如何将object传递给内联onclick event 。 当我尝试遵循以下代码时，我将得到undefined或[object object] 。

还有如何将click事件绑定到h以避免内联代码。

this.get = function(o) {
  console.log(o, o.foo);
}

this.somefunction = function(robj) {
  for (var i = 0, i <= robj.length; i++) {
    var fname = robj[i]['filename']
    h += '<div class="checkbox checkbox-success" onclick="get(\'' + robj + '\')">' +
      '<input id="' + fname + '" type="checkbox" class="styled"> ' +
      '<label for="' + fname + '"><a data-fancybox-next class="button-next" href="#">' + fname + '</a></label>' +
      '</div>';
  }
}

Answer 1

我在您的代码中看到的一些问题，

你的循环应该是i < robj.length并且有一个语法错误,应该是;
h未定义，但现在不再使用
不能使用o.foo访问传递给get()的数组

附带说明：查看ES6 模板文字，以帮助清理当前正在执行的某些引用操作，例如id="' + fname + '"看起来像id="${fname}"

这是一个完整的工作示例，上面有关于如何将侦听器添加到div（通过创建DOM元素）并将对象作为参数的修复。

 this.get = function(o) { console.log(o); console.log(o.foo); } this.somefunction = function(robj) { for (let i = 0; i < robj.length; i++) { var fname = robj[i]['filename'] var myDiv = document.createElement("div"); myDiv.className = "checkbox checkbox-success"; myDiv.onclick = function(){get(robj[i])}; myDiv.innerHTML = '<input id="' + fname + '" type="checkbox" class="styled"> ' + '<label for="' + fname + '"><a data-fancybox-next class="button-next" href="#">' + fname + '</a></label>'; document.getElementById("container").appendChild(myDiv); } } var robj = [{filename: "myFilename", foo: "myFoo"}] somefunction(robj);

 <div id="container"></div>

Answer 2

这是动态编写的onclick的示例。 只需将功能保留在doucment.ready之外

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function changePath(distinct_inputs) { console.log(distinct_inputs); } $(document).ready(function(){ var distinct_inputs = 0; $('.icon1').click( function(){ distinct_inputs = distinct_inputs + 1 ; $('#insert-file').append('<ul class="ul list-inline"><li style="width:90%"><input onchange="changePath('+distinct_inputs+')" type="file" class="base'+distinct_inputs+' form-control form-input form-style-base"><input type="text" class="fake'+distinct_inputs+' form-control form-input form-style-fake" readonly placeholder="choose your file"><span class="glyphicon glyphicon-open input-place"></span></li><li class="icon fa fa-minus"></li></ul>'); }); }); </script> </head> <body> <div id="insert-file" ></div> <button type="button" class="icon1">CLick here</button> </body> </html>

jQuery通过内联onclick传递对象

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-10-31 19:59:49

解决方案2
1 2017-10-31 19:03:26

jQuery通过内联onclick传递对象

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-10-31 19:59:49

解决方案2 1 2017-10-31 19:03:26

解决方案1
3 已采纳 2017-10-31 19:59:49

解决方案2
1 2017-10-31 19:03:26