Question

我有一个功能：

function controls() {
      var block = $('#controls');
      block.html('');
      block.append('<button type="button" onClick="focus(this.value);" id="viewAll" value="all">View All</button> <br><br>');
      for (var i = 0; i < markers.length; i++) {
        block.append(
          '<label><input id="drones" type="radio" onClick="focus(this.value);"  name="drones" value="' + markers[i].title + '" /> Focus on: ' + markers[i].title + ' </label><br>'
        );
      }
    }

它将html元素动态添加到div中。

我想获取我单击的项目的值。

但是我收到此错误：

未捕获的TypeError：无法在“ HTMLElement”上执行“焦点”：参数1（'options'）不是对象。在HTMLButtonElement.onclick（地图2.html：1） onclick @ map 2.html：1

chrome中的源窗口正在报告：focus（this.value）;

我的聚焦功能：

function focus(drone) {
console.log(drone);
}

请帮助。

Answer 1

我建议使用委托的jQuery事件处理程序。像这样：

var markers = [
  {title: '1'},
  {title: '2'},
  {title: '3'},
];

function controls() {
  var block = $('#controls');
  block.html('');
  block.append('<button type="button" class="get-val" id="viewAll" value="all">View All</button> <br><br>');
  for (var i = 0; i < markers.length; i++) {
    block.append(
      '<label><input id="drones" type="radio" class="get-val"  name="drones" value="' + markers[i].title + '" /> Focus on: ' + markers[i].title + ' </label><br>'
    );
  }
}

$('#controls').on('click', '.get-val', function() {
  console.log($(this).val());
});

controls();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="controls"></div>

Answer 2

该错误背后的主要原因是函数focus是HTMLElement的库函数。您需要更改函数的名称而不是focus

请尝试使用fnFocus代替focus。

function controls() {
  var block = $('#controls');
  block.html('');
  block.append('<button type="button" onClick="fnFocus(this.value);" id="viewAll" value="all">View All</button> <br><br>');
  for (var i = 0; i < markers.length; i++) {
    block.append(
      '<label><input id="drones" type="radio" onClick="fnFocus(this.value);"  name="drones" value="' + markers[i].title + '" /> Focus on: ' + markers[i].title + ' </label><br>'
    );
  }
}
    
function fnFocus(drone) {
  console.log(drone);
}
    
var markers = [
  {title: '1'},
  {title: '2'}
];

controls();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="controls"></div>

Answer 3

希望对您有帮助

var markers=[];
function controls() {
      var block = $('#controls');
      block.html('');
      block.append('<button type="button" onclick="focus_ele(this.value)" id="viewAll" value="all">View All</button> <br><br>');
      for (var i = 0; i < markers.length; i++) {
        block.append(
          '<label><input id="drones" type="radio" onclick="focus_ele(this.value);"  name="drones" value="' + markers[i].title + '" /> Focus on: ' + markers[i].title + ' </label><br>'
        );
      }
    }

function focus_ele(els) {
console.log(els);
}
$("document").ready(function(){
    controls();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="controls"></div>

使用javascript调用内联函数时出错

3 个答案: