Question

[更新] 下面的第一个jQuery部分动态创建一个“a.open-popup”元素。但是在我点击之后，我需要两个处理程序来触发：

第一个处理程序（更高优先级）：数据库写入和HTML重写

第二个处理程序：simpleLightbox打开

我尝试了以下内容：

一个。在动态创建a.open-popup元素之后添加“.find（'a.open-popup'）”。但这会导致simpleLightbox打开，但不会触发第一个处理程序。

湾使用.live（）作为第一个处理程序。 SimpleLightbox仍然打开，但不是第一个处理程序。

℃。使用下面的代码，我从第一个处理程序中调用.simpleLightbox。但是没有处理程序被触发实际上，它只是尝试转到另一个页面，其URL以“#popup01”结尾。

// 2nd handler: SimpleLightbox function is called after it has been defined
$(document).ready(function() {
    jQuery('a.open-popup').simpleLightbox({
          closeLink:'a.close'
    });
}); 



// "a.open-popup" is dynamically created here
     jQuery('.add-inv-button').live('click', function(){
                var $InvestmentID = jQuery(this).siblings('input').attr('value');
                var $add_points = jQuery(this).siblings('.add-points').html();;
                var $inputs = { 'InvestmentID' : $InvestmentID };
                var $clicked = this;
                var $outputs;

                jQuery.ajax({
                        type: 'POST',
                        url: '/ajax/add_investment',
                        dataType: 'json',
                        data: $inputs,
                        success: function(data) {
                            $outputs = data;

                            if ($outputs.state == 'Plan')
                            {
                                // dynamically create the "a.open-popup" element
                                jQuery($clicked).removeClass('add-inv-button')
                                            .addClass('completed-button member-only')
                                            .html('<img class="left" src="/images/check.png" /> <a class="open-popup did-it member-only" href="#popup01" >I did this investment!</a>');
                            }
                         }
                });
    });


// 1st handler: Database write and HTML rewrite           
    jQuery('a.open-popup').click(function(){
                var $parent = jQuery(this).parent();
                var $InvestmentID = $parent.siblings('input').attr('value');
                var $inputs;
                var $outputs;

                $inputs = { 'InvestmentID' : $InvestmentID };
                $(this).simpleLightbox({closeLink:'a.close'});

                // Database write
                jQuery.ajax({
                        type: 'POST',
                        url: '/ajax/completed_investment',
                        dataType: 'json',
                        data: $inputs,
                        success: function(data) {
                            $outputs = data;

                            // HTML rewrite
                            if ($outputs.state == 'Begin')
                            {
                                $parent.siblings('.plan-msg').remove();
                                $parent.removeClass('completed-button')
                                            .addClass('add-inv-button ')
                                            .html('+ Add to Your Plan');
                                $newpoints = '(+' + $outputs.points + " " + $outputs.plural + ")";
                                $parent.siblings('.done-points').removeClass('done-points')
                                                                .addClass('add-points')
                                                                .html($newpoints);
                            }
                            return false;
                        }
                  });
    });

Answer 1

可能就是simpleLightbox已经捕获了你的点击并且它返回false或者阻止了默认行为，基本上会覆盖你的实时点击功能。

你可以做的是如果simpleLightbox有一个回调函数，将a.popup click函数转换为一个方法然后将其称为simpleLightbox回调，或者你可以在click函数之后调用simpleLightbox。

Answer 2

添加新答案作为第一个有点过时，可能是错误的（mods请删除或合并，如有必要）

你的jQuery（'a.open-popup'）。simpleLightbox调用将不起作用，因为a.open-popup链接是在声明之后创建的（就像弹出是动态创建的，click不起作用）。你需要的是jquery live（但这只适用于click和其他基本的jquery事件）弹出点击功能（加上你的其他函数似乎不在document.ready函数中）：

// 2nd handler: SimpleLightbox function is called after it has been defined
$(document).ready(function() {


// "a.open-popup" is dynamically created here
     jQuery('.add-inv-button').live('click', function(){
                var $InvestmentID = jQuery(this).siblings('input').attr('value');
                var $add_points = jQuery(this).siblings('.add-points').html();;
                var $inputs = { 'InvestmentID' : $InvestmentID };
                var $clicked = this;
                var $outputs;

                jQuery.ajax({
                        type: 'POST',
                        url: '/ajax/add_investment',
                        dataType: 'json',
                        data: $inputs,
                        success: function(data) {
                            $outputs = data;

                            if ($outputs.state == 'Plan')
                            {
                                // dynamically create the "a.open-popup" element
                                jQuery($clicked).removeClass('add-inv-button')
                                            .addClass('completed-button member-only')
                                            .html('<img class="left" src="/images/check.png" /> <a class="open-popup did-it member-only" href="#popup01" >I did this investment!</a>');
                            }
                         }
                });
    });


// 1st handler: Database write and HTML rewrite           
jQuery('a.open-popup').live("click", function(){
  var $parent = jQuery(this).parent();
  var $InvestmentID = $parent.siblings('input').attr('value');
  var $inputs;
  var $outputs;

  $inputs = { 'InvestmentID' : $InvestmentID };
  $(this).simpleLightbox({closeLink:'a.close'});

  // Database write
  jQuery.ajax({
    type: 'POST',
      url: '/ajax/completed_investment',
      dataType: 'json',
      data: $inputs,
      success: function(data) {
      $outputs = data;

      // HTML rewrite
      if ($outputs.state == 'Begin')
      {
         $parent.siblings('.plan-msg').remove();
         $parent.removeClass('completed-button')
              .addClass('add-inv-button ')
              .html('+ Add to Your Plan');
         $newpoints = '(+' + $outputs.points + " " + $outputs.plural + ")";
         $parent.siblings('.done-points').removeClass('done-points')
                                       .addClass('add-points')
                                       .html($newpoints);
       }
       return false;
     }
     });

     jQuery(this).simpleLightbox({
       closeLink:'a.close'
     });
   });
 });

如果我知道simplelightbox插件是什么，如果你能提供它的API或插件页面的链接，我将能够提供更好的答案，它也会有所帮助。

Answer 3

我不确定simpleLightbox是什么（也许是一个自行开发的插件？）。很明显，您需要在点击链接之前调用它，并为您设置一个事件，处理任何未来的点击并将其转换为灯箱显示。

在链接存在之前调用simpleLightbox对您没有帮助。也没有在第一个处理程序中调用它，因为已经单击了链接。在创建链接后，唯一可以调用simpleLightbox的地方。

至于你的“第一个处理程序” - 不幸的是，现场活动不会起作用，因为simpleLightbox将绑定到click。它将获得该事件的第一枪，并且它将停止传播，这意味着您的第一个处理程序将永远不会运行。你需要绑定到click，以及easyFightbox之前的那样，所以你可以先行。

以下是一些示例代码，可帮助您入门：

if ($outputs.state == 'Plan')
{
  // dynamically create the "a.open-popup" element
  jQuery($clicked).removeClass('add-inv-button')
    .addClass('completed-button member-only')
    .html('<img class="left" src="/images/check.png" /> <a class="open-popup did-it member-only" href="#popup01" >I did this investment!</a>')
    .find('a.open-popup')
    .click(my1stHandler)
    .simpleLightbox({closeLink: 'a.close'});
}

当然，在此之下，您应该定义函数my1stHandler：

// 1st handler: Database write and HTML rewrite           
function my1stHandler() {
  var $parent = jQuery(this).parent();
  .
  .
  .

  return true; // make sure simpleLightbox gets to go after we do
}

希望这有帮助！

Answer 4

我有类似的问题。我很难理解你想要什么，但我相信你说你想要以编程方式添加另一个a.open-popup并让新创建的popup对已经创建的事件有一个绑定事件。

我发现最有效的一个问题是将我的所有点击事件和直播活动添加到ready()功能中。

其次我假设您希望a.open-popup click事件处于活动状态，以便绑定所有新创建的a.open-popup链接。我是以编程方式创建新链接，并且必须将我的点击监听器设置为活动，以便所有新的a.links在创建时都会监听。

也许尝试这样的事情。

<强> MODS 如果我理解这个问题，请删除我的答案。

// 2nd handler: SimpleLightbox function is called after it has been defined
$(document).ready(function() {

    // "a.open-popup" is dynamically created here
     jQuery('.add-inv-button').live('click', function(){
                var $InvestmentID = jQuery(this).siblings('input').attr('value');
                var $add_points = jQuery(this).siblings('.add-points').html();;
                var $inputs = { 'InvestmentID' : $InvestmentID };
                var $clicked = this;
                var $outputs;

                jQuery.ajax({
                        type: 'POST',
                        url: '/ajax/add_investment',
                        dataType: 'json',
                        data: $inputs,
                        success: function(data) {
                            $outputs = data;

                            if ($outputs.state == 'Plan')
                            {
                                // dynamically create the "a.open-popup" element
                                jQuery($clicked).removeClass('add-inv-button')
                                            .addClass('completed-button member-only')
                                            .html('<img class="left" src="/images/check.png" /> <a class="open-popup did-it member-only" href="#popup01" >I did this investment!</a>');
                            }
                         }
                });
    });

    // 1st handler: Database write and HTML rewrite           
    jQuery('a.open-popup').live('click', function(){
                var $parent = jQuery(this).parent();
                var $InvestmentID = $parent.siblings('input').attr('value');
                var $inputs;
                var $outputs;

                $inputs = { 'InvestmentID' : $InvestmentID };
                $(this).simpleLightbox({closeLink:'a.close'});

                // Database write
                jQuery.ajax({
                        type: 'POST',
                        url: '/ajax/completed_investment',
                        dataType: 'json',
                        data: $inputs,
                        success: function(data) {
                            $outputs = data;

                            // HTML rewrite
                            if ($outputs.state == 'Begin')
                            {
                                $parent.siblings('.plan-msg').remove();
                                $parent.removeClass('completed-button')
                                            .addClass('add-inv-button ')
                                            .html('+ Add to Your Plan');
                                $newpoints = '(+' + $outputs.points + " " + $outputs.plural + ")";
                                $parent.siblings('.done-points').removeClass('done-points')
                                                                .addClass('add-points')
                                                                .html($newpoints);
                            }
                            return false;
                        }
                  });
    });


    jQuery('a.open-popup').simpleLightbox({
          closeLink:'a.close'
    });
});

您是否希望用户在点击a.open-popup链接后点击“添加到计划”链接？

在旁注上，您可以将您的演示上传到jsfiddle.net并发布链接，以便我们测试一下究竟发生了什么？

.live（）不工作：如何将多个处理程序绑定到动态生成的元素？

4 个答案: