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

时间:2019-01-07 06:47:13

标签: javascript

对不起,我仍然很喜欢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
}

2 个答案:

答案 0 :(得分:2)

请改用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 };

答案 1 :(得分:0)

大重组

(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');

})();