Question

我知道我以前做过这件事，但此刻它正在滑落我的脑海。

如果将jQuery小部件添加到窗口中，我将如何设计样式？例如......

<html>
<div id="somediv"></div>
<script>
    $("#button").button();
    $("somediv").html("<input id='button'>");
</script>

输出应该在加载后的somediv中包含一个jQuery按钮对象，但是没有，因为在调用$（“＃button”）选择器时#button不存在。显然我可以在这个例子中切换脚本中的两行，但实际上我是通过AJAX动态添加按钮。我知道有一些方法可以通过jQuery为窗口添加一个监听器来设置窗口小部件的样式，因为我之前已经完成了，我只是忘记了现在通过搜索找到它并且无法找到它。

编辑：我知道如果在添加按钮后设置按钮的样式，如何使代码生效。重点是在按钮存在之前有对象声明，然后在通过AJAX添加按钮后自动应用于按钮。我以前做过这个，我只是忘记了。

Answer 1

你可以像这样使用

$("#somediv").html("<input   id='button' style='padding:5px;' />");

或者您可以为其添加自定义类，可以轻松设置样式

$("#somediv").html("<input type='button' id='button' class='myclass' />");

修改

您可以使用
创建按钮
$('body').append($('<input/>',{type:button, value:"somevalue", "class":"someclass"});

Answer 2

一个选项是在成功函数中应用样式：

 $.ajax({
     //...do your call
 })
 .done(function(){
     $("somediv").html("<input id='button'>")
     //Now you can apply your class/style (even using the JQuery css method if you'd want)
 });

不知道你会考虑什么

Answer 3

如果您需要添加一个全局侦听器，它将对按钮单击作出反应，在可能不存在的按钮上，您可以写：

$(document).on('click', '#button', function(){
    // Click logic here
});

如果你真的需要STYLE它，那么你必须调用一个函数来执行ajax调用之后

但是你可以在内存元素中设置样式：

假设您收到此消息：来自Ajax调用的"<button id="button"></button>"。

$.get( "ajax/test.html", function( newHtml ) {
  var $newHtml = $(newHtml); // Convert the string to a jquery object. 
  // $newHtml - This will be in memory and NOT in the DOM

  // Then you can style it and add classes as you like
  $newHtml.css('color', 'red');
  $newHtml.addClass('btn btn-danger');
  // And finally append it somewhere
  $('#somediv').append($newHtml);
});

结果按钮的位置如下：

 <button id="button" style="color: red;" class="btn btn-danger"></button>

如何通过AJAX将jquery小部件添加到窗口中来设置样式

3 个答案: