等待点击事件在 Javascript 中完成答案

【问题标题】：Wait for click event to complete in Javascript等待点击事件在 Javascript 中完成
【发布时间】：2012-12-25 03:41:52
【问题描述】：

我的图像中有 onClick 事件，这会导致将新选项卡添加到 jQuery 选项卡中。它旁边的事件会将内容添加到这个新标签中。

$('#Image').click();
$('#controladdedbyclickabove').append( message);

我看到的问题是点击事件不会等待操作完成它会继续下一条语句。因此，我看不到添加到单击将生成的新控件的内容。如何让 click 事件在移动到下一条语句之前等待操作完成？

T 必须依赖于触发点击，因为 #image 上的 onClick 操作具有我可以提取为字符串的所有参数，但我不确定如何执行它。

当onClick事件发生时，调用该方法：

function addTab(title, uri, userid) {
    var newTab = $("#tabs").tabs("add", uri, title);
}

【问题讨论】：

代码中有趣的部分没有给出。点击处理程序内部必须进行一些异步操作。
不是你提到异步我认为 jquery addtab 中的 uri 部分正在执行 ajax 调用来为选项卡提取一些内容.. 那么如果它是异步的解决方案是什么？
啊哈，所以你大概在使用 jQuery UI 选项卡。您需要在create(?) 回调中执行.append( message); 部分，指定为.tabs({...}) 选项。您还需要稍微有创意，因为您希望仅在以编程方式启动新选项卡时进行回调操作，而不是在用户单击按钮时。
不，它不能是 jQuery UI 选项卡，它没有“添加”方法。你用的是哪个标签插件？
addTab 是我编写的自定义方法，它使用 Jquery 选项卡。 .tabs("add" 是一个jquery方法

标签： c# javascript jquery jquery-ui model-view-controller

【解决方案1】：

你可以使用回调函数：

 if($('#Image')) {
  $('#Image').click(function() {
        $('#controladdedbyclickabove').append( message);
  });
}else {
  console.log('image object not there');
}

【讨论】：

我之前确实尝试过，但没有奏效。它甚至不添加控件。这意味着点击没有正确调用。
或者你可能没有在 document.ready 中添加这个 $(function(){ // 以上都在这里 });
if($('#Image')) 将始终返回 true，即使元素不存在。 jQuery 将创建空对象....使用if($('#Image').length) 来检查是否存在。还需要触发点击 ....chain .click() 到处理程序。 $('#Image').click(function() {/*...*/}).click()
它在 $(function () { 里面，我也尝试调用该函数来添加新选项卡替换点击事件。结果相同。我正在使用 jquery tabs var newTab = $("# chattabs").tabs("add", uri, title); onclick 事件正在调用这个 addnewtab 语句
尝试在$('#Image').click(function() {/*...*/}).click()末尾添加click()，没有成功。但是它确实添加了与以前不同的新选项卡，但附加没有找到控件

【解决方案2】：

您不能等待事件被处理，因为在您退出函数并将控制权返回给浏览器之前它不会被处理。

要在事件处理完毕后运行代码，需要在退出函数后启动它：

$('#Image').click();
window.setTimeout(function(){
  $('#controladdedbyclickabove').append( message);
}, 0);

【讨论】：

【解决方案3】：

有很多方法可以做到这一点。您想在点击完成后执行某些操作。

1：为什么不把你的代码写成这样

function addTab(title, uri, userid) {
   var newTab = $("#tabs").tabs("add", uri, title);
   $('#controladdedbyclickabove').append( message);
}

2：你也可以这样定义函数

function addTabCallback () {
  $('#controladdedbyclickabove').append( message);
}

function addTab(title, uri, userid) {
   var newTab = $("#tabs").tabs("add", uri, title);
   addTabCallback();
}

3：可以使用观察者模式

function addTab(title, uri, userid) {
   var newTab = $("#tabs").tabs("add", uri, title);
   var observer = addTab.observers.shift();
   while (observer) {
      observer();
      observer = addTab.observers.shift();
   }
}
addTab.observers = [];

应该在触发点击时做些小改动

addTab.observers.push(function () {
   // codes here will be executed when the click finished
   $('#controladdedbyclickabove').append( message);
});

$('#Image').click();

这是一个带有观察者模式的示例代码，实际上，它应该做一些观察者类型检查等。^_^。

【讨论】：

我尝试了选项#1，但选项 2 无效。没有尝试过 3 不知道它在做什么

【解决方案4】：

我最终将附加消息传递回 ajax 调用的服务器。因此，当单击事件调用时，控件返回时会添加一条消息。我无法让 javascript 回调按预期工作。

【讨论】：