Question

按钮动态创建onclick事件，当我传递单个引用变量这个时它工作正常，但是当我通过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>

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

1 个答案: