Question

我想知道是否有人可以帮我一个功能。

onlick只会触发一次。

launchTagManager: function(id) {
    console.log(document.getElementById('metadata_field_multiple_text_701889_options['+id+']'));
    document.getElementById('metadata_field_multiple_text_701889_options['+id+']').value="change";

    $('body').append('<div id="tagManagerPopup" class="eesTooltip tooltipSouth" style="display:block;width:450px; left: 50%; top: 50%;-webkit-transform: translate(-50%, -50%);-webkit-font-smoothing: subpixel-antialiased;transform: translate(-50%, -50%);position: fixed;"> <div class="tooltipTitle">Add a tag...</div><div class="tooltipContent"> <div class="tooltipMessage"> <div id="ees_infoBoxColumn"> <div id="ees_infoBox"> <div id="ees_infoBoxInner1"> <div id="ees_infoBoxInner2"> <div id="ees_assetInfo"> <div class="row container" id="geocoder" style="margin-bottom:5px;"> <input id="cu-geocoder-place" class="inputText" type="text" value="" style="width:290px;"> <a href="#" id="cu-geocoder-submit" class="guiButton light alignRight">Search</a> </div><div class="row clearfix" style="margin-top:5px;"> <a id="addTag" href="" class="guiButton default alignLeft"><span>Add tag</span></a> <a id="closeTagManager" href="" class="guiButton light alignRight"><span>Cancel</span></a> </div></div></div></div></div></div></div></div></div>');

    $(document).on('click', '#closeTagManager', function(e) { 
      e.preventDefault();
      $('#tagManagerPopup').hide();
    });
  }

launchTagManager被动态添加按钮的onClick调用。

弹出窗口将在我第一次点击#closeTagManager按钮时关闭，但是当我第二次打开弹出窗口并尝试关闭时，它会保持打开状态。

有什么想法吗？

Answer 1

尝试移动此块

$(document).on('click', '#closeTagManager', function(e) { 
  e.preventDefault();
  $('#tagManagerPopup').hide();
});

在launchTagManager方法之外，并将id更改为类。

像这样：

launchTagManager: function(id) {
    console.log(document.getElementById('metadata_field_multiple_text_701889_options['+id+']'));
    document.getElementById('metadata_field_multiple_text_701889_options['+id+']').value="change";
    $('body').append('<div class="tagManagerPopup eesTooltip tooltipSouth" style="display:block;width:450px; left: 50%; top: 50%;-webkit-transform: translate(-50%, -50%);-webkit-font-smoothing: subpixel-antialiased;transform: translate(-50%, -50%);position: fixed;"> <div class="tooltipTitle">Add a tag...</div><div class="tooltipContent"> <div class="tooltipMessage"> <div id="ees_infoBoxColumn"> <div id="ees_infoBox"> <div id="ees_infoBoxInner1"> <div id="ees_infoBoxInner2"> <div id="ees_assetInfo"> <div class="row container" id="geocoder" style="margin-bottom:5px;"> <input id="cu-geocoder-place" class="inputText" type="text" value="" style="width:290px;"> <a href="#" id="cu-geocoder-submit" class="guiButton light alignRight">Search</a> </div><div class="row clearfix" style="margin-top:5px;"> <a id="addTag" href="" class="guiButton default alignLeft"><span>Add tag</span></a> <a href="" class="closeTagManager guiButton light alignRight"><span>Cancel</span></a> </div></div></div></div></div></div></div></div></div>');
},
init: function(){
    $(document).on('click', '.closeTagManager', function(e) { 
      e.preventDefault();
      $('.tagManagerPopup').hide();
    });
}

Answer 2

您尝试这样做有两个问题。首先，您正在隐藏对话框，然后添加另一个具有相同ID的对话框。 jQuery只会找到第一个，所以当你第二次打开对话框然后单击关闭按钮时，它会找到已经隐藏的对话框。这就是为什么它不会隐藏任何进一步的对话框。要解决此问题，您只需将其删除即可。

此外，您将在创建对话框的函数内绑定click事件处理程序。您只需创建一次该事件处理程序，只需在函数外创建它......

launchTagManager: function(id) {
    console.log(document.getElementById('metadata_field_multiple_text_701889_options['+id+']'));
    document.getElementById('metadata_field_multiple_text_701889_options['+id+']').value="change";

    $('body').append('<div id="tagManagerPopup" class="eesTooltip tooltipSouth" style="display:block;width:450px; left: 50%; top: 50%;-webkit-transform: translate(-50%, -50%);-webkit-font-smoothing: subpixel-antialiased;transform: translate(-50%, -50%);position: fixed;"> <div class="tooltipTitle">Add a tag...</div><div class="tooltipContent"> <div class="tooltipMessage"> <div id="ees_infoBoxColumn"> <div id="ees_infoBox"> <div id="ees_infoBoxInner1"> <div id="ees_infoBoxInner2"> <div id="ees_assetInfo"> <div class="row container" id="geocoder" style="margin-bottom:5px;"> <input id="cu-geocoder-place" class="inputText" type="text" value="" style="width:290px;"> <a href="#" id="cu-geocoder-submit" class="guiButton light alignRight">Search</a> </div><div class="row clearfix" style="margin-top:5px;"> <a id="addTag" href="" class="guiButton default alignLeft"><span>Add tag</span></a> <a id="closeTagManager" href="" class="guiButton light alignRight"><span>Cancel</span></a> </div></div></div></div></div></div></div></div></div>');
}

$(document).on('click', '#closeTagManager', function(e) { 
    e.preventDefault();
    $('#tagManagerPopup').remove();
});

或者你可以将事件处理程序保留在创建对话框的函数中，因为它被分配给一个将被销毁的新按钮......

launchTagManager: function(id) {
    console.log(document.getElementById('metadata_field_multiple_text_701889_options['+id+']'));
    document.getElementById('metadata_field_multiple_text_701889_options['+id+']').value="change";

    $('body').append('<div id="tagManagerPopup" class="eesTooltip tooltipSouth" style="display:block;width:450px; left: 50%; top: 50%;-webkit-transform: translate(-50%, -50%);-webkit-font-smoothing: subpixel-antialiased;transform: translate(-50%, -50%);position: fixed;"> <div class="tooltipTitle">Add a tag...</div><div class="tooltipContent"> <div class="tooltipMessage"> <div id="ees_infoBoxColumn"> <div id="ees_infoBox"> <div id="ees_infoBoxInner1"> <div id="ees_infoBoxInner2"> <div id="ees_assetInfo"> <div class="row container" id="geocoder" style="margin-bottom:5px;"> <input id="cu-geocoder-place" class="inputText" type="text" value="" style="width:290px;"> <a href="#" id="cu-geocoder-submit" class="guiButton light alignRight">Search</a> </div><div class="row clearfix" style="margin-top:5px;"> <a id="addTag" href="" class="guiButton default alignLeft"><span>Add tag</span></a> <a id="closeTagManager" href="" class="guiButton light alignRight"><span>Cancel</span></a> </div></div></div></div></div></div></div></div></div>');

    $('#closeTagManager').on('click', function(e) { 
        e.preventDefault();
        $('#tagManagerPopup').remove();
    });
}

如果以第二种方式执行此操作，则无需将单击处理程序绑定到文档。

点击只会触发一次

2 个答案: