jQuery 단추 사용자 정의 대화 상자에서 클릭

Question

전체 화면 jQuery 대화 상자를 만들고 있습니다.

대화 상자의 헤더 역할을하는 사용자 정의 <div>을 만듭니다.

<div>의 내부는 <table>입니다. <table>은 1 <tr>을 포함하며을 포함합니다. 각 <div> 안에는 대화 상자의 머리글에 표시 할 실제 내용이 있습니다.

사용자가 헤더의 정보를 편집 할 수 있도록 일부 jQuery 단추 개체를 표시하려고합니다. 버튼에 클릭 이벤트를 첨부하고 헤더에 다른 클릭 이벤트를 첨부했습니다. 버튼을 누르면 헤더의 클릭 이벤트가 호출되지만 버튼의 클릭 이벤트는 호출되지 않습니다. 여기

$(dialog) 
    .parent() 
    .find('.ui-dialog-titlebar').click(
     function() { 
      $(dialog).dialog('close').remove(); 
     } 
    ); 

버튼 생성 코드는 다음과 같습니다 :이

var editBtn = $('<button>'); 
editBtn 
    .css('height', '2.2em') 
    .css('float', 'right') 
    .button(
     { 
      text: false, 
      icons: 
       { 
        primary: 'ui-icon-pencil' 
       } 
     } 
    ) 
    .on(
     'click', 
     function() { 
      alert('Edit clicked'); 
      EditClicked(this); 
      return false; 
     } 
    ); 

어떤 생각을 해결할 수있는 방법을

다음 대화 헤더 클릭 코드는?

Answer 1

jQuery를 사용하면 button 대신 <button>을 선택할 수 있습니다. 나는 주위에 태그가있는 HTML 객체를 선택하려하지 않았습니다. 스타일이 버튼에 추가됩니까? 또한 CSS의 해시를 사용하십시오 :

.css({'height':'2.2em','float':'right'}) 

css를 두 번 호출하면 높이가 초과 될 수 있습니다.

또 다른 팁은 .parent().find()의 두 가지 메서드 호출을 수행하는 대신 .closest('.ui-dialog-titlebar')을 사용합니다.

건배!

Answer 2

.on은 아마도 이 아니며입니다. 이 클래스의 목적은 생성 된 요소와 상관없이 지정된 요소 내부의 지정된 선택기와 일치하는 모든 요소에 일반 이벤트 처리기를 연결하는 것입니다.

대신에 특정 개체에 이벤트 처리기를 연결하는 .bind()이 필요합니다.

var editBtn = $('<button>'); 
editBtn 
    .css({ 
     'height': '2.2em', 
     'float': 'right' 
    }) 
    .button(
     { 
      text: false, 
      icons: 
       { 
        primary: 'ui-icon-pencil' 
       } 
     } 
    ) 
    .bind(
     'click', 
     function() { 
      alert('Edit clicked'); 
      EditClicked(this); 
      return false; 
     } 
    ); 

:

그래서,이 코드는 작업을 수행해야합니다 (플러스로를 : 당신은 객체를 전달하여 .css() 체인 방지 할 수 있습니다).