How to assign event handler to custom button in JQuery UI Dialog

Question

In my html I have such code: link and div for jQuery UI Dialog:

 <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>

In my external js-file I have event handler to catch the click on link:

$(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');

When I click on link, this event fires well, no problem. But I hope that inside function open() I can assign my action to the first button of div, which used in UI Dialog. Tracing the code, I see that open() fired, click-assigning passed well, without errors, but when I try to click on button - I have no action as I considered - no logs in console.

What am I doing wrong ?

Becouse to do it I need to google - have no idea what it means. — Eugene Shmorgun
– Eugene Shmorgun, Commented Jul 31, 2015 at 10:13
You are already delegating event here: $(document).on('click', '[data-comment="delete"]', function (evt) {...}); so i was thinking you already knew what it means — A. Wolff
– A. Wolff, Commented Jul 31, 2015 at 10:17
It works. It was good propose, might be I was looking desicion to long. If you write you comment as reply I will mark it as answer. — Eugene Shmorgun
– Eugene Shmorgun, Commented Jul 31, 2015 at 10:28

A. Wolff · Accepted Answer · 2015-07-31 10:33:10Z

1

You could delegate it to modal div level:

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

answered Jul 31, 2015 at 10:33

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to assign event handler to custom button in JQuery UI Dialog

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related