jquery - 当传递多个参数时 onclick 事件不起作用。为什么？

Question

动态创建的按钮具有 onclick 事件，当我传递单个引用变量 this 时，它工作正常，但当我通过 传递多个参数时，它工作正常onclick 事件，它不起作用。指导我我做错了什么？我尝试了以下代码:

按钮创建脚本

$(document).on('change','.typeOption',function(){
    labelVal=$(this).closest('tr').find('input').val();
    console.log(labelVal);
    if($(this).val() == 'radio' || $(this).val() == 'select'){
        $(this).closest('tr').after("<button type='button' class='btn btn-block createOptionBtn' onclick='createOptions(this,'"+labelVal+"')'><i class='fa fa-plus'></i> Add Option</button>");
    }
});

将值传递给此函数:

function createOptions(e,myval){
    $(e).parent().parent().find('.row').show();
    console.log(myval);
    $(e).parent().parent().find('.row').append('<div class="col-md-4" style="margin-bottom:10px">'+
            '<div class="input-group">'+
              '<input type="text" class="form-control" placeholder="Enter option..." >'+
              '<span class="input-group-addon" onclick="removeOption(this)"><i class="fa fa-trash-o"></i></span>'+
            '</div>'+
      '</div>');
}

Answer 1

引用转义按钮创建问题。

如下所示:-

$(this).closest('tr').after('<button type"button" class="btn btn-block createOptionBtn" onclick="createOptions(this,\'' + labelVal + '\')"><i class="fa fa-plus"></i> Add Option</button>');

演示示例(只是为了表明它有效):-

$(document).ready(function(){
  labelVal='abc';
  $('div').append('<button type"button" class="btn btn-block createOptionBtn" onclick="createOptions(this,\'' + labelVal + '\')"><i class="fa fa-plus"></i> Add Option</button>');
});
function createOptions(e,myval){
    $(e).after('<div class="col-md-4" style="margin-bottom:10px"><div class="input-group"><input type="text" class="form-control" placeholder="Enter option..." ><span class="input-group-addon" onclick="removeOption(this)">remove<i class="fa fa-trash-o"></i></span></div></div>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>