Question

嗨我正在模拟测试门户网站上工作，在这个门户网站中有一个名为多重选择组合的部分，我们同时使用复选框和单选按钮。 来到场景我必须将一个特定的Div类添加/添加到同一个Div类中，多个包含多个复选框等.Div类包含复选框等。为了添加/追加我已经使用过< em>克隆在jquery 。在这个复选框中有一个jquery函数正在父Div类中工作，它在子节点中无法工作（克隆）。希望为这个场景获得更好的解决方案谢谢大家。

 public void transformResponse(Object data) { // data contains json string
    JavaScriptObject jsObj = (JavascriptObject) data.// This line causes the below excepton
    }

    ClassCastExcetion: java.lang.Strig can not cast to com.google.gwt.core.cient.Javascript Object.

Answer 1

您对多个元素使用相同的id，这不是一个好习惯。元素ID在整个文档中应该是唯一的。相反，您可以像这样使用classes。如果您将使用相同的id，则仅针对具有该id的文档中的第一个元素发生click事件。此外，使用on事件侦听器为动态追加的元素执行事件。

$("body").on("click", ".checker", function() {


  if ($(this).is(":checked")) {

    $(this).closest(".address").find(".cmcq0").hide();
    $(this).closest(".address").find(".mcq0").show();
  } else {

    $(this).closest(".address").find(".cmcq0").show();
    $(this).closest(".address").find(".mcq0").hide();
  }
});

var rowNum = 0;
$("body").on("click", ".addmore", function() {
  rowNum++;
  var $address = $(this).parents('.address');
  var nextHtml = $address.clone();
  nextHtml.attr('id', 'address' + rowNum);
  nextHtml.find('checker').prop('id', 'checker' + rowNum, 'mcq' + rowNum);
  var hasRmBtn = $('.rmbtn', nextHtml).length > 0;
  if (!hasRmBtn) {
    var rm = "<button type='button' class='rmbtn'>Remove</button>"
    $('.addmoreadd', nextHtml).append(rm);
  }
  $address.after(nextHtml);
});

$("body").on("click", ".rmbtn", function() {
  $(this).parents('.address').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addresses">
  <div class="address" id="address0">
    <div class="join">
      <div class="col s12 m12">
        <div class="card-panel lighthen-4  black-text" style="width:850px;">
          <div class="row">
            <p><span style="background-color:Black;color:white;font-
            size:25px">Question</span>
              <div id="number"></div>
              <div class="input-field col s12">
                <textarea id="textarea14" class="materialize-textarea"></textarea>
                <label for="textarea14">Question</label>
              </div>

              <div class="switch">
                <label>
                Off
                <input class="checker checker0" type="checkbox" />
                <span class="lever"></span>
                On
                </label>
              </div>

              <div class="checker mcq0" style="display:none;">
                <p>
                  <input type="radio" name="group" id="test9" />
                  <label for="test9">Choice A<div class="input-field col s12"><textarea id="textarea15" class="materialize-textarea"></textarea></div></label>

                </p>
                <p>
                  <input type="radio" name="group" id="test10" />
                  <label for="test10">Choice B<div class="input-field col s12"><textarea id="textarea16" class="materialize-textarea"></textarea></div></label>

                </p>
                <p>
                  <input type="radio" name="group" id="test11" />
                  <label for="test11">Choice C<div class="input-field col s12"><textarea id="textarea17" class="materialize-textarea"></textarea></div></label>

                </p>
                <p>
                  <input type="radio" name="group" id="test12" />
                  <label for="test12">Choice D<div class="input-field col s12"><textarea id="textarea18" class="materialize-textarea"></textarea></div></label>

                </p>

              </div>
          </div>


          <div class="checker cmcq0">
            <p>
              <input type="checkbox" id="test13" />
              <label for="test13">Choice A<div class="input-field col s12"><textarea id="textarea19" class="materialize-textarea"></textarea></div></label>
            </p>
            <p>
              <input type="checkbox" id="test14" />
              <label for="test14">Choice B<div class="input-field col s12"><textarea id="textarea20" class="materialize-textarea"></textarea></div></label>
            </p>
            <p>
              <input type="checkbox" id="test15" />
              <label for="test15">Choice C<div class="input-field col s12"><textarea id="textarea21" class="materialize-textarea"></textarea></div></label>
            </p>
            <p>
              <input type="checkbox" id="test16" />
              <label for="test16">Choice D<div class="input-field col s12"><textarea id="textarea22" class="materialize-textarea"></textarea></div></label>
            </p>





          </div>
        </div>
      </div>

    </div>
    <div class="addmoreadd">
      <button type="button" class="addmore">Add More Address</button>
    </div>

PS 将标识#cmcq0更改为类.cmcq0，将#mcq0更改为类.mcq0，并为{添加on事件监听器{1}}

Answer 2

jsfiddle可以提供帮助，

尝试$(document).on('event','#element', function() { /* code here */ } );

对于动态加载的元素。

在克隆的div中，我无法调用jquery函数

2 个答案: