Question

对不起，我仍然很喜欢Javascript。我可以知道如何通过onClick将Object变量传递给函数吗？

下面的代码是我的对象：

var myObject = {
    id : id,
    email : email,
    name : name,
    type : type
};

下面我要附加的代码：

$('#main-container').append(
    '<div>'+
    '<button onclick="passObject('+myObject+')">Submit</button>'+ //how to pass myObject here, I know I pass wrongly ps
    '</div>');

函数中的myObject值为String类型，除此之外，当我从对象中获取值时：

function passObject(myObject){
    console.log(myObject); // [object Object]
    console.log(myObject.email); //undefined
}

Answer 1

请改用Javascript正确地附加事件侦听器，以使myObject通过闭包可见，而不是使用内联处理程序（内联处理程序很难管理，通常被认为是很差的做法）：

function passObject(myObject){
  console.log(myObject); // [object Object]
  console.log(myObject.email); //undefined
}

const myObject = {
  id : 'id',
  email : 'email',
  name : 'name',
  type : 'type'
};

const div = $(`
  <div>
  <button>Submit</button>
  </div>
`);
div.find('button').on('click', () => passObject(myObject));
$('#main-container').append(div);

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

尽管在上面的代码中，myObject包含字符串而不是对先前值的引用，但是请注意，对于您的代码，在ES6 +环境中，可以根据需要使用速记属性名称：

const myObject = { id, email, name, type };

Answer 2

大重组

(function() {
    var myObject = {
        id : id,
        email : email,
        name : name,
        type : type
    };

    var btn = $('<button>Submit</button>');

    btn.on( 'click', function( e) {
        e.stopPropagation(); e.preventDefault();

        console.log(myObject); // [object Object]
        console.log(myObject.email); //undefined

    });

    $('<div/>').append( btn).appendTo('#main-container');

})();

Javascript Onclick通过附加函数传递对象

2 个答案: