25

文字列内のOnclick関数にパラメータとしてオブジェクトを渡したいのですが。次のようなもの：

function myfunction(obj,parentobj){ 
   var o=document.createElement("div");
   o.innerHTML='<input type="button" onclick="somelistener(' + obj + ')" />';
   parentobj.appendChild(o.firstChild);
}

明らかに、これは機能しません。誰かが何か考えを持っていますか？THX！

@Austinによって提案された、より完全なバージョン

<!DOCTYPE html>
<html>
<body>
<style type="text/css">

</style>
<p id="test">test</p>
<p id="objectid"></p>

<script>
function test(s){
    document.getElementById("test").innerHTML+=s;
}

function somelistener(obj){
    test(obj.id);
}

function myfunction(obj,parentobj){ 
    var o=document.createElement("div");
    o.innerHTML='<input type="button" onclick="somelistener(' + obj + ')" />';

    o.onclick = function () {
        someListener(obj)
    }
parentobj.appendChild(o.firstChild);
}

myfunction(document.getElementById("objectid"),document.getElementById("test"));

</script>

</body>
</html>
4

5 に答える 5

25

obj上記の例は、 to textの出力がであるため機能しません。[Object object]したがって、基本的には、を呼び出してsomeListener([Object object])います。

に要素のインスタンスがある間に、ojavascriptを使用してそのクリックにバインドします。

function myfunction(obj,parentobj){ 
    var o=document.createElement("div");
    o.innerHTML='<input type="button" />';

    o.onClick = function () {
        someListener(obj)
    }

    parentobj.appendChild(o.firstChild);
}

私はここであなたのために働くフィドルを作成しました：JSFiddle

于 2012-08-24T12:56:56.657 に答える
9 
function myfunction(obj,parentobj){ 
        var o=document.createElement("div");
         o.innerHTML="<input type='button' onclick='somelistener("+JSON.stringify(obj)+")'/>"; 
                                  parentobj.appendChild(o.firstChild);
            } 
    // my similar problem, function a was called in a jsonArray loop in the dataTable initiation
    function a(data, type, obj) {
                         var str = "";
                         str += "<span class='button-group'>";
                         str +="<a onclick='chooseData1("+JSON.stringify(obj)+")'>[选择]</a>";
                         str += "</span>";
                         return str;
                                            }
function chooseData1(data){
                        console.log(data);
                  }
于 2017-12-20T08:32:21.207 に答える
3

JSON.strigify（obj）を使用してオブジェクトを文字列化し、パラメーターとしてonclick関数に渡すだけで、オブジェクトが直接解析され、オブジェクトとして関数に受信されます。

function myfunction(obj,parentobj){ 
   var o=document.createElement("div");
   var stringifiedObj = JSON.stringfy(obj)

   o.innerHTML='<input type="button" onclick=`somelistener(${stringifiedObj})` />';
   parentobj.appendChild(o);
}

function somelistener(obj){
   console.log(typeof obj) //Object
}
于 2021-02-14T18:03:23.600 に答える
3

答えがよくわからなかった古い質問ですが、最も簡単な解決策は、関数を組み合わせてencodeURIComponent、JSON.stringifyオブジェクトを文字列化し、それらの特殊文字をエスケープしてから、関数内のプロセスを逆にすることです。

var htmlStr = `<button onclick="myFunctions('${encodeURIComponent(JSON.stringify(obj))}')"></button>`

function myFunctions(obj) {
  obj = JSON.parse(decodeURIComponent(obj))
  // do something with obj
}

ここでテストします：

var obj = {a: 'hey there', b: 1}

var htmlStr = `<button onclick="myFunctions('${encodeURIComponent(JSON.stringify(obj))}')">Click me</button>`

$('#mydiv').append(htmlStr)

function myFunctions(obj) {
  obj = JSON.parse(decodeURIComponent(obj))
  console.log(obj.a)
  console.log(obj.b)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>

于 2021-03-22T11:57:50.320 に答える
-8

このように渡すだけです：

o.innerHTML='<input type="button" onclick="somelistener(this)" />';
于 2013-11-18T06:08:22.087 に答える