-2

使用 jQuery 替换 div 内容的最佳方法是什么？这是我的应用程序的示例：

<div id="size">
    <p>Waiting for item</p>
</div>

选择项目后，大小是 size-sml（这是一个 jquery 按钮集）或 size-l，具体取决于项目类型。

<div id="size-sml" style="display: none">
    <input id="s_r1" name="radio" type="radio"><label for="s_r1">Small</label>
    <input id="s_r2" name="radio" type="radio"><label for="s_r2">Medium</label>
    <input id="s_r3" name="radio" type="radio"><label for="s_r3">Large</label>
</div>

或者

<div id="size-l" style="display: none">
    <label for="liters">Volume in liters: </label>
    <input id="liters">
</div>

我正在使用 .html() 更改 div，但这会导致错误“无法在初始化之前调用按钮上的方法，尝试调用方法‘小部件’”，每当我按下其中一个中小型按钮时。常规文本输入工作正常。

JavaScript：

var size = $( "#size" );
var types = $( "#types" ); //jQuery buttonset
types.click( function() {
    sizeType = $( "#types :radio:checked" ).attr( "st" );
    if ( sizeType == "G" ) {
        size.html( $( "#size-sml" ).html() );
        size.buttonset();
    } else if ( sizeType == "L" ) {
        size.html( $( "#size-l" ).html() );
    }
});
4

1 回答 1

0

我不完全确定你做错了什么，或者为什么你会得到那个错误，因为你没有提供标记#types，或者初始化它的 javascript。我根据提供的内容重建了这些作品，它似乎对我有用。对您的代码进行一些小的更改：

Plunk：http ://plnkr.co/edit/7dvzrb0Mzpg80bApmTmi?p=preview

$(function(){
  $("#types").buttonset();
  $("#types :radio").click(function(e) {
      var sizeType = $(this).attr( "st" );
      if ( sizeType == "G" ) {
      $("#size").html( $( "#size-sml" ).html() )
                .buttonset();
      } else if ( sizeType == "L" ) {
          ("#size").html( $( "#size-l" ).html() );
      }
    });
});

我相信您的问题的根源在于sizeType = $( "#types :radio:checked" ).attr( "st" );它不会返回单个结果。因此，我没有将点击事件放在父级上，而是将其放在:radio.

于 2013-03-20T19:57:49.780 回答