Question

我知道有很多问题类似于我要提出的问题，但似乎没有一个问题可以帮助我。我有一个使用twitter引导类hide的div，因此它是隐藏的。 div加载了一些通过ajax动态加载的其他内容。我正在使用jquery和委托函数，以便在选中复选框时取消隐藏该div。我已经验证了正在调用click函数并且相应的if语句为true但是没有显示div。下面是我的html的代码（我使用的是asp.net mvc和razor）：

 @foreach (var item in Model.Checkboxes)
 {
     <label class="checkbox">
         <input type="checkbox" name="Checkboxes" id="Checkboxes" value=@item>
                    @item
      </label>
  }
  <div class="display-field hide">
     @Html.TextAreaFor(model => model.Other, new { @cols = 100, @rows = 5 })
  </div>

这是我的jquery代码：

 $('body').delegate('#Checkboxes', 'click', function () {
    if ($(this).val() == "other")
        $("#Other").show();
});

Answer 1

jQuery show更改style.display。另一方面，Bootstrap使用CSS类“隐藏”。

这两个不兼容。

解决方案：

$('body').delegate('#Checkboxes', 'click', function () {
    if ($(this).val() == "other")
        $("#Other").removeClass("hide");
});

<强>更新
还有可疑的东西:) 尝试将代码更改为：

$('body').delegate('#Checkboxes', 'click', function () {
    console.log("click event fired!");
    console.log("this.val() is " + $(this).val());
    if ($(this).val() == "other")
        console.log("entered the if");
        console.log("other exists? " + $("#Other").length);
        $("#Other").removeClass("hide");
});

根据（不）打印到控制台的内容（Chrome中的CTRL + SHIFT + J），您应该可以进一步缩小问题范围。

如果仍然无效，我建议在JSFiddle中创建一个最小的案例，它可能会给你更多的回应。

显示动态添加的隐藏div

1 个答案: