JS - проблема с селектором

198

18 июня 2018, 07:10

С помощью плагина jQuery UI Dialog нужно сделать всплывающее окно. Есть проблема с селектором. Сейчас все выглядит так:

$(function() { 
  if (window.screen.availWidth <= 479) { 
    $(".dialog").dialog({ 
      autoOpen: false, 
      width: window.screen.availWidth, 
      title: "Запрос прайса", 
      closeText: "", 
      show: { 
        effect: "blind", 
        duration: 500 
      }, 
      hide: { 
        effect: "blind", 
        duration: 500 
      } 
    }); 
  } else { 
    $(".dialog").dialog({ 
      autoOpen: false, 
      width: 400, 
      title: "Запрос прайса", 
      closeText: "", 
      show: { 
        effect: "blind", 
        duration: 500 
      }, 
      hide: { 
        effect: "blind", 
        duration: 500 
      } 
    }); 
 
  } 
 
 
  $(".opener").on("click", function() { 
    $(".dialog").dialog("open"); 
  }); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div id="left"> 
  <div class="dialog"></div> 
</div> 
<div id="center"> 
  <a class="opener">Open Dialog</a> 
</div>

Все работает как надо. Но сейчас надо сделать так:

$(function() { 
  if (window.screen.availWidth <= 479) { 
    $("#center .dialog").dialog({ 
      autoOpen: false, 
      width: window.screen.availWidth, 
      title: "Запрос прайса", 
      closeText: "", 
      show: { 
        effect: "blind", 
        duration: 500 
      }, 
      hide: { 
        effect: "blind", 
        duration: 500 
      } 
    }); 
  } else { 
    $("#center .dialog").dialog({ 
      autoOpen: false, 
      width: 400, 
      title: "Запрос прайса", 
      closeText: "", 
      show: { 
        effect: "blind", 
        duration: 500 
      }, 
      hide: { 
        effect: "blind", 
        duration: 500 
      } 
    }); 
 
  } 
 
 
  $(".opener").on("click", function() { 
    $("#center .dialog").dialog("open"); 
  }); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
 
<div id="left"> 
  <div class="dialog"></div> 
</div> 
<div id="center"> 
  <div class="dialog"></div> 
  <a class="opener">Open Dialog</a> 
</div>

Но работает некорректно. Блок скрывается как нужно, но при нажатии на .opener ничего не происходит. Где ошибка?

Update: при правке кто-то внес ссылки на библиотеки. у меня другие:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" /> 
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

Update: Если бы я мог дать уникальный id этому элементу, вопроса бы не было. Если ли возможность как-то обратиться к нему еще?

В итоге пришлось прописать перед функцией диалогового окна функцию добавления #id нужному элементу:

  $( function() { 
  $(".center > .dialog").each(function() { 
	  $(this).attr("id", "dialog-center");  
  }); 
  })

И уже потом обращаться к нему по id. Если кто-то знает более изящное решение, буду благодарен.

Answer 1

Вам нужно на прямую обращаться к объекту, на который вешаете dialog, не знаю почему, но это работает только так, смотрите пример от разработчика.

$(function() { 
  if (window.screen.availWidth <= 479) { 
    $("#dialog_center").dialog({ 
      autoOpen: false, 
      width: window.screen.availWidth, 
      title: "Запрос прайса", 
      closeText: "", 
      show: { 
        effect: "blind", 
        duration: 500 
      }, 
      hide: { 
        effect: "blind", 
        duration: 500 
      } 
    }); 
  } else { 
    $("#dialog_center").dialog({ 
      autoOpen: false, 
      width: 400, 
      title: "Запрос прайса", 
      closeText: "", 
      show: { 
        effect: "blind", 
        duration: 500 
      }, 
      hide: { 
        effect: "blind", 
        duration: 500 
      } 
    }); 
  } 
 
  $(".opener").on("click", function() { 
    $("#dialog_center").dialog("open"); 
  }); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div id="left"> 
  <div id="dialog_left"></div> 
</div> 
<div id="center"> 
  <div id="dialog_center"></div> 
  <a class="opener">Open Dialog</a> 
</div>