将 jquery 样式应用于动态创建的按钮答案

【问题标题】：Applying jquery style to dynamically created buttons将 jquery 样式应用于动态创建的按钮
【发布时间】：2012-08-31 18:14:44
【问题描述】：

我是 uI 编程的新手。我在我的应用程序中使用 Jqgrid。我有一列在每一行中显示按钮，使用格式化程序选项创建。在格式化程序选项中描述的功能中，我为按钮绑定了一个单击事件。下面是代码

        { label: 'Depatment Name', name: 'deptName', width: 100,
              formatter:actionButtonFormatter
        },

      function actionButtonFormatter ( cellvalue, options, rowObject )
       {
          var element ='<div id="deptNmBtn"><button onClick=getDepartMentNm("' + rowObject.empName+'")> <span>Add</span></button></div>';
          $("button, input:submit, input:button", this).button();
          return element;
       }

我在这里面临两个问题。

1) Jquery 主题未应用于按钮，在使用格式化程序选项添加的部门名称列中。我只希望此按钮与 Jquery 主题一起应用，所以我尝试了

         $("button, input:submit, input:button", this).button();
         $("button, input:submit, input:button", jqgrid_table_id).button();  
         $("button, input:submit, input:button", deptNmBtn).button(); //div id

但是它们都不起作用，并且列中的按钮没有与 Jquery 主题一起应用。

2) 在 onclick 中，我传递了一个employeeName 参数，它是行的值。如果员工姓名不包含任何空格，则效果很好。如果员工姓名包含空格，它会抛出我

        SyntaxError: unterminated string literal

取自萤火虫。有没有人遇到过这些问题。请帮帮我。也请帮助理解两者之间的区别

        var element = '<div> ....'

和

        var element = $('<div> ....')

我知道第二个是 jquery 语法，但确切的区别是什么。非常感谢。

【问题讨论】：

$('<div>') 包装了一个准备附加到 DOM 的 jQuery 对象。而'<div>' 只是一个字符串文字。

标签： jquery jquery-ui jqgrid

【解决方案1】：

添加这些类

ui-button ui-widget ui-state-default ui-corner-all

悬停时添加ui-state-highlight。

【讨论】：

【解决方案2】：

不确定我是否能涵盖这里的所有基础......

1) 我不记得添加样式的 jQuery UI 方法。但无论如何我从不这样做。找出哪些类需要成为元素的一部分，并在按钮创建期间添加它们。因此，与其制作一个按钮，然后在其上调用 .button()，不如将其设为 "<button class="someclass otherclass">Button</button>"，其中的类填充了 jQuery 主题所需的类。

2) 无论如何，您可能不应该使用 onclick inline，但这是另一个讨论。同时，它非常简单：第一个是字符串，最终可能会被某些 JavaScript 方法（在 jQuery 中，类似于 .append()）用来将新节点附加到 DOM。第二个创建节点对象，但它仍然需要附加到 DOM 与...类似.append()。 ;-) 在引擎盖下，有区别。但对于大多数用途来说，这并不重要。

【讨论】：