javascript - 如果动态按钮发生变化，如何从动态按钮获取数据属性

Question

我想获取动态按钮(由多选库创建)的属性值(此处为标题)，如果有变化，则将其显示在文本框中。

这是我现在拥有的:

// for combine checkbox value

$(function() {
  $('input').on('click', function() {
    var values = [];
    $('input[name=test]:checked').each(function() {
      values.push($(this).parent().text());
    });
    $('[name="result"]').attr({
      value: values.join('|')
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form oninput="txtrequete.value = ( 
      txtdomain.value +  ';' +  result.value).replace(/\s+/g, '');" class="form-horizontal form-label-left">
  FINAL
  <div>
    <input type="text" name="txtrequete" disabled="disabled" size='70'>
  </div>
  TEXT TEST FOR CONCAT
  <div>
    <input type="text" name="txtdomain" id="domainId" value="testvalue" />
  </div>
  CHECKBOX TEST FOR CONCAT
  <div>
    <label><input type="checkbox" name="test" /> test3</label><br />
    <label><input type="checkbox" name="test" /> test4</label><br />
    <input type="text" name="result" disabled="disabled" />
  </div>

  <div>
    BUTTON CREATED FROM MULTISELECT JQUERY LIBRARY
  </div>
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="India, United State, Canada, Taiwan" aria-expanded="true">
        <span class="multiselect-selected-text">4 selected</span> <b class="caret"></b></button>
  <div>
    <input type="text" name="spantitle" disabled="disabled" value="i would like the title value 'India, United State, Canada, Taiwan' HERE from the button attribute if change" size="70" />
  </div>
</form>

有人用过吗？提前谢谢你

<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown"
    title="India, United State, Canada, Taiwan" aria-expanded="true">

    <span class="multiselect-selected-text">4 selected</span>
    <b class="caret"></b></button>div>
<input type="text" name="spantitle" disabled="disabled"
    value="i would like the title value 'India, United State, Canada, Taiwan' HERE from the button attribute if change"
    size="70" />
</div>

Answer 1

如果您有事件监听器，只需简单地使用按钮的 title 属性并将其设置为输入字段的值，例如:

$('input[name=spantitle]').val($('.multiselect ').attr('title'));

如果您不确定动态变化何时或如何发生，您可以使用 MutationObserver .

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature which was part of the DOM3 Events specification.

这是它如何工作的示例:

// for combine checkbox value

$(function() {
  $('input').on('click', function() {
    var values = [];
    $('input[name=test]:checked').each(function() {
      values.push($(this).parent().text());
    });
    $('[name="result"]').attr({
      value: values.join('|')
    });
  });
});


$('#test').on('click', () => {
  $('.multiselect ').attr('title', 'Just another attribute');
});

var observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "attributes") {
      $('input[name=spantitle]').val($('.multiselect ').attr('title'));
    }
  });
});

observer.observe($('.multiselect')[0], {
  attributes: true // Listening to the attribute changes
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form oninput="txtrequete.value = ( 
      txtdomain.value +  ';' +  result.value).replace(/\s+/g, '');" class="form-horizontal form-label-left">
  FINAL
  <div>
    <input type="text" name="txtrequete" disabled="disabled" size='70'>
  </div>
  TEXT TEST FOR CONCAT
  <div>
    <input type="text" name="txtdomain" id="domainId" value="testvalue" />
  </div>
  CHECKBOX TEST FOR CONCAT
  <div>
    <label><input type="checkbox" name="test" /> test3</label><br />
    <label><input type="checkbox" name="test" /> test4</label><br />
    <input type="text" name="result" disabled="disabled" />
  </div>

  <div>
    BUTTON CREATED FROM MULTISELECT JQUERY LIBRARY
  </div>
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="India, United State, Canada, Taiwan" aria-expanded="true">
        <span class="multiselect-selected-text">4 selected</span> <b class="caret"></b></button>
  <div>
    <input type="text" name="spantitle" disabled="disabled" value="i would like the title value 'India, United State, Canada, Taiwan' HERE from the button attribute if change" size="70" />
  </div>
</form>

<button id="test">Test me!</button>

点击按钮“测试我!”更改 title 属性，您可能会看到对象 observer 将更改输入字段的值。