Question

我正在尝试创建相同功能的多个实例，但希望保留自己的属性。因此，当在第一个实例中创建按钮时，该onclick事件应指向同一第一个实例的函数。但是（这个）关键字在这种情况下不起作用。我知道还有其他事情需要做。

JS：

function updateAlias(mac, realName, displayName) {

  var prevHtml = jQuery("#" + mac).html();

  var formHtml = "<input type='text' id='alias-" + mac + "' value='" + jQuery.trim(displayName) + "' />";
  formHtml += "<button class='btn btn-primary btn-xs' onclick='" + this.apply() + ";'>Apply</button>";

  jQuery("#" + mac).html(formHtml);

  var apply = function() {
    alert(mac);
  };
}

HTML：

<div id="id1">
  <div onclick="new updateAlias('id1','android-8112ad950b0bca36','device 1')">Device 1</div>
</div>

<div id="id2">
  <div onclick="new updateAlias('id2','android-8112ad950b0bca36','device 2')">Device 2</div>
</div>

JS小提琴：https://jsfiddle.net/amitshahc/zg74v4k3/9/

Answer 1

而是使用jQuery事件处理程序和data-*属性来存储数据，如

jQuery(function($) {
  $('.editor').on('click', '.display', function() {
    $(this).replaceWith("<input type='text' value='" + $.trim($(this).text()) + "' />" + "<button class='btn btn-primary btn-xs'>Apply</button>");
  });

  $('.editor').on('click', 'button.btn', function() {
    alert($(this).closest('.editor').data('name'));
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="editor" data-name="android-8112ad950b0bca36" data-display="device 1">
  <div class="display">Device 1</div>
</div>
<div id="id2" class="editor" data-name="android-8112ad950b0bca37" data-display="device 2">
  <div class="display">Device 2</div>
</div>

Answer 2

我的代码中有一点改变了。

将第二个div的ID更新为id2
使用jquery添加了单击处理程序。

HTML：

<div id="id2">
    <div onclick="updateAlias('id1','android-8112ad950b0bca36','device 1')">Device 1</div>
</div>
<div id="id2">
    <div onclick="updateAlias('id2','android-8112ad950b0bca36','device 2')">Device 2</div>
</div>

JS：

 function updateAlias(mac, realName, displayName) 
{
  var prevHtml = jQuery("#" + mac).html();

  var formHtml = "<input type='text' id='alias-" + mac + "' value='" + jQuery.trim(displayName) + "' />";
  formHtml += "<button id='"+mac+"-apply' class='btn btn-primary btn-xs' >Apply</button>";

  jQuery("#" + mac).html(formHtml);
  jQuery("#"+mac+"-apply").click(function() {
    alert(mac);
  });

}

Javascript：从dynamicaly创建的实例调用嵌套函数

2 个答案: