提问人：Jon Acedo 提问时间：8/30/2023 更新时间：8/30/2023 访问量：29
如何将jquery中的参数传递给以虚拟方式创建的按钮的点击函数？
How can I pass parameters in jquery to a on click function of a button dinamically created?
问：
长期潜伏在这里需要帮助。
我有一个名为 button 的类
class GameButton
{
constructor ( id, width, height, buttonFunction, attrs )
{
this._id = id
this._width = width;
this._height = height;
this._attrs = attrs;
this._buttonFunction = buttonFunction
}
append()
{
$( '#gameContainer' ).append( '<img id="' + this._id + '" src="">');
$( '#' + this._id ).css( 'top', this._top + '%' );
$( '#' + this._id ).css( 'left', this._left + '%' );
$( '#' + this._id ).on( 'click', this._buttonFunction );
}
}
它有更多的属性，但无论如何。当我创建此类的实例时，只要不需要参数，它们就可以正常工作。我在这里迷路了，一些帮助可以挽救我的生命
let startGame = function( language )
{
some awesome code here
}
let buttonStart = new GameButton( 'start', 43, 0, startGame, 'myParamValue' );
提前致谢
我试过了这个
通过执行以下操作
$( '#' + this._id ).bind( 'click', this._attrs, this._buttonFunction );
但不起作用
答：
0赞
deepanshu223
8/30/2023
#1
你提到的方法是正确的。
也许您没有在传递的函数中正确选择值，因为参数绑定到 并且不作为独立传递。
这意味着您将能够在 下找到参数。bindevent objectevent.data
我创建了一个示例可运行代码，该代码使用您的问题代码作为基础，并假设其他所有内容都按预期工作，以突出显示绑定和参数传递功能。
class GameButton
{
constructor ( id, width, height, buttonFunction, attrs )
{
this._id = id
this._width = width;
this._height = height;
this._attrs = attrs;
this._buttonFunction = buttonFunction
}
append()
{
$( '#gameContainer' ).append( '<img id="' + this._id + '" src="https://images.unsplash.com/photo-1587207433549-7d796bccc6a2">');
$( '#' + this._id ).css( 'top', this._top + '%' );
$( '#' + this._id ).css( 'left', this._left + '%' );
// Bind the parameters to the click event
$( '#' + this._id ).bind( 'click', this._attrs, this._buttonFunction);
}
}
let startGame = function( params )
{
if (params.target){ //Checking if the passed params is an event
data = params.data;
$( '#clickOutput' ).html(data);
}
}
let buttonStart = new GameButton( 'start', 43, 0, startGame, 'myParamValue' );
buttonStart.append();#start {
height: 100px;
width: 150px
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gameContainer">
</div>
<div id="clickOutput">
</div>单击图像后，传递的参数将显示在指定容器中的图像下方。
评论
0赞
Jon Acedo
8/31/2023
你好！！谢谢！！这奏效了。
0赞
deepanshu223
8/31/2023
@JonAcedo很高兴我的回答有所帮助。如果您能投赞成票并将我的答案标记为已接受，那就太好了，如果它是正确的解决方案。
0赞
ndlinh
8/30/2023
#2
您可以使用 .on（） 在父容器上绑定 click 事件
class GameButton
{
constructor ( id, width, height, buttonFunction, attrs )
{
this._id = id
this._width = width;
this._height = height;
this._attrs = attrs;
this._buttonFunction = buttonFunction
( '#gameContainer' ).on('click', 'img.gameButton', buttonFunction);
}
append()
{
$( '#gameContainer' ).append( '<img class="gameButton" id="' + this._id + '" src="https://images.unsplash.com/photo-1587207433549-7d796bccc6a2">');
$( '#' + this._id ).css( 'top', this._top + '%' );
$( '#' + this._id ).css( 'left', this._left + '%' );
}
}
评论