【问题标题】:How to assign event handler to custom button in JQuery UI Dialog如何将事件处理程序分配给 JQuery UI 对话框中的自定义按钮
【发布时间】:2015-10-22 23:24:03
【问题描述】:

在我的 html 中,我有这样的代码:jQuery UI Dialog 的链接和 div:

 <a data-comment="delete" data-comment-url="<?=Yii::app()->createUrl('comments/delete', ['id' => $comment->id])?>" href="javascript:" ">              
  </a>
 <!-- div with dialog's markup -->
 <div id="commentDelete" class="modal smallDialog" title="УДАЛЕНИЕ">
                            Delete this row &
 <a  class="button142 wa" id="confirmDeleteComment"  style="">Yes</a>
 <a href="javascript:;" onClick="$('#commentDelete').dialog('close');" class="button142 wa">No</a>
                        </div>

在我的外部 js 文件中,我有事件处理程序来捕捉点击链接:

$(document).on('click', '[data-comment="delete"]', function (evt) {
    evt.preventDefault();

    var data = $.data(document, 'comments'),
        $this = $(this);

    var options = {
        title: 'Delete row?',
        autoOpen: false,
        resizable: false,
        height: 200,
        width: 380,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {

        },
        close: function (event, ui) {
            $("#commentDelete").dialog().dialog('close');
        },
        create: function(event, ui){
            $('#confirmDeleteComment').click(function(){
               console.log("!!!");
            });
        }
    }
    $("#commentDelete").dialog(options).dialog('open');

当我点击链接时,这个事件会很好地触发,没问题。但我希望在函数open() 内部我可以将我的动作分配给在UI Dialog 中使用的div 的第一个按钮。跟踪代码,我看到open() 被触发,点击分配顺利通过,没有错误,但是当我尝试点击按钮时 - 我没有考虑任何操作 - 控制台中没有日志。

我做错了什么?

【问题讨论】:

  • 你为什么不委托事件呢?
  • 因为这样做我需要谷歌 - 不知道这意味着什么。
  • 你已经在这里委派活动:$(document).on('click', '[data-comment="delete"]', function (evt) {...}); 所以我想你已经知道这意味着什么
  • 它有效。这是一个很好的提议,可能是我期待很久。如果您将评论写为回复,我会将其标记为答案。

标签: jquery user-interface jquery-ui jquery-events


【解决方案1】:

您可以将其委托给模态div 级别:

$('#commentDelete').on('click', '#confirmDeleteComment', function () {
    console.log("!!!");
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-06-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多