更改后如何从动态按钮获取数据属性

时间:2019-06-29 22:57:42

标签: javascript jquery

我想获取动态按钮(由multiselect库创建)的属性值(在此为标题),如果有更改,则将其显示在文本框中。

这就是我现在拥有的:

// 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>

1 个答案:

答案 0 :(得分:2)

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

class My_controller extends CI_Controller 
{   
    public $stop = false;

    public function start()
    {
        ignore_user_abort(); 
        set_time_limit(0);
        do{
            ....//do something, such as trading bitcoins
        }while(! $this->stop); 
    }

    public function stop()
    {
        $this->stop = true;
    }

}

如果不确定动态更改的时间或方式,可以使用MutationObserver

  

MutationObserver接口提供了监视功能   对DOM树进行的更改。它被设计为替代品   适用于DOM3中较旧的“突变事件”功能   活动规范。

这是一个如何工作的示例:

$('input[name=spantitle]').val($('.multiselect ').attr('title'));
// 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>将更改您输入字段的值。