JavaScript不适用于jQuery UI对话框

66bbxpm5 于 2023-05-17 发布在 jQuery

关注(0)|答案(1)|浏览(111)

$("input, select, textarea")
        .addClass("ui-widget ui-widget-content ui-corner-all")
        .css({
            padding: ".2rem .5rem"
        });

因此，我使用上面的代码来显示我网站上的每个输入，选择和文本区域，其方式与我使用jQuery UI添加的元素相同。此代码适用于我网站上的每个页面。它工作得很好，它将css和类添加到每个输入，选择和文本区域。除了输入，选择和文本区域内的对话框，它不适用。我尝试了很多不同的东西，但没有一个有效。有人知道怎么做吗？我可以手动添加类，但我有超过100个输入字段分布在不同的对话框

$(document).on("dialogopen", ".ui-dialog", function() {
  $(this).find("input, select, textarea")
    .addClass("ui-widget ui-widget-content ui-corner-all")
    .css({
      padding: ".2rem .5rem"
    });
});

$( ".myDialogClass" ).dialog({
  open: function() {
    $(this).find("input, select, textarea")
      .addClass("ui-widget ui-widget-content ui-corner-all")
      .css({
        padding: ".2rem .5rem"
      });
  }
});

两种方法我都试过了，但都不管用

jquery

来源：https://stackoverflow.com/questions/76180351/javascript-doesnt-apply-on-jquery-ui-dialog

1条答案

按热度按时间

6l7fqoea1#

当我用下面的代码进行测试时，我似乎得到了预期的结果。

$(function() {
  $("input, select, textarea")
    .addClass("ui-widget ui-widget-content ui-corner-all")
    .css({
      padding: ".2rem .5rem"
    });
  $(".myDialogClass").dialog({
    open: function() {
      $(this).find("input, select, textarea")
        .addClass("ui-widget ui-widget-content ui-corner-all")
        .css({
          padding: ".2rem .5rem"
        });
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="page">
  <h3>My Page</h3>
  <label>Input:</label> <input type="text">
  <label>Select:</label>
  <select>
    <option>Option 1</option>
  </select>
  <div class="myDialogClass" title="My Dialog">Some Text!
    <label>Dialog Input:</label> <input type="text">
  </div>
</div>

Dialog中的Input元素显示了以下类和样式。

<input type="text" class="ui-widget ui-widget-content ui-corner-all" style="padding: 0.2rem 0.5rem;">

赞(0）回复(0）举报 2023-05-17

我来回答

JavaScript不适用于jQuery UI对话框

1条答案

相关问题

热门标签

最新问答