jquery-ui 按钮看起来已禁用答案

【问题标题】：jquery-ui button looks disabledjquery-ui 按钮看起来已禁用
【发布时间】：2021-06-06 12:31:58
【问题描述】：

我猜我在这里做了一些愚蠢的事情，你可以指出我正确的方向。我正在尝试使用 jquery-ui“铅笔”图标进行编辑，并且该图标看起来不活动。见下面的html和js。

<!DOCTYPE html>
<HTML>
    <HEAD>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
        <TITLE>Sample</TITLE>
        <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="sample.js"></script>
    </HEAD>
        
    <script>
        $(document).ready(function() {      
            $( window ).on( "load", function() {
                sample.launch();
            });        
        });
    </script>
    <body>
        <input type="button" id="applybtn" style="width:65px" value="Click Me" />
    </body>
</HTML>

这里是js文件：

var sample = sample || {};
(function ($) {
    "use strict";   
    function onApplyBtnClick() {
        var html = '<input type="text" id="schpn12" value=' + "ABCD" + '>';
        html += '<button class="editbtn" >Edit</button>';
        $('<div></div>')
            .html('<span></span>' + html)
            .css("background-color","#FFFFFF")
            .dialog({
                modal: true,
                close: function () { $(this).remove(); },
                buttons: {
                    "Apply": function () {                        
                        $(this).dialog('close');
                    }
                }
            });
            
            $('.editbtn').button({
                icons: {
                    primary: "ui-icon-pencil"
                },
                text: false
            });
    }
    function launch() {     
        $("#applybtn").click(onApplyBtnClick);
    }
    sample.launch = launch;
}(jQuery));

【问题讨论】：

由于.button() 的代码在onApplyBtnClick() 内部，因此必须执行此操作才能正确初始化按钮。我建议将代码移到函数之外或移到launch()。
看起来 .button() 正在执行，因为我可以看到“铅笔”图标。我应该添加任何课程以使其看起来很活跃吗？还是我错过了按钮初始化（如果有的话）？
你能用 just 按钮重新创建它（在你的问题中的 sn-p（编辑，单击[<>]）） - 即删除模式代码。见minimal reproducible example。
您的按钮看起来“正常”。它只是垃圾 jquery-ui 默认的“主题”和图标，使它看起来被禁用。与实际禁用按钮 .button({disabled:false}) 进行比较，您会看到。这是我为你准备的jsfiddle.net/uej4rpmL

标签： javascript jquery jquery-ui

【解决方案1】：

考虑以下内容。

$(function() {
  function onApplyBtnClick() {
    var dialogBox = $("<div>", {
        title: "Test Dialog"
      })
      .css("background-color", "#FFFFFF")
      .dialog({
        modal: true,
        close: function() {
          $(this).remove();
        },
        buttons: {
          "Apply": function() {
            $(this).dialog('close');
          }
        }
      });

    $("<input>", {
      type: "text",
      id: "schpn12",
      value: "ABCD"
    }).appendTo(dialogBox);

    $("<button>", {
        class: "editbtn"
      })
      .html("Edit")
      .button({
        icons: {
          primary: "ui-icon-pencil"
        },
        showLabel: false
      }).appendTo(dialogBox);
  }

  $("#applybtn").click(onApplyBtnClick);

});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<button id="applybtn">Apply</button>

由于您正在构建对话框、输入和按钮，因此最好在创建它们时对其进行初始化。

text 不是按钮的选项或方法。您将需要使用showLabel 选项。

【讨论】：