テキスト入力のボタンテキストを変更する - JS、RoR

Question

Price Rangeボタンをクリックすると、ポップオーバーが開きます。そのポップオーバーには、2つの入力ボックスがあります。 Min RentボックスとMax Rentボックスです。そのボックスに値を入力すると、Price Rangeボックスに以前に入力された値が表示されるようにしたいと思います。 $2000 to $2500のようなものです。私は見て、Googleと他のStackOverflowの質問と回答を見て、しかし、私はこれを達成する方法がわかりません。どんな助けでも大歓迎です！

エルブファイル：

<div class="col-md-2 col-xs-6"> 
    <a tabindex="0" class="button btn-transparent" id="listing-price-selector" role="button" data-toggle="popover">Price Range <span class="caret"></span></a> 
</div> 

<div id="listing-price-content" style="display: none;"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-6"> 
     <div class="input-group input-group-sm"> 
      <span class="input-group-addon" id="basic-addon1">$</span> 
      <%= f.text_field :min_price, class: "form-control", placeholder: "Min Rent", data: { "binding-name" => "min-price" } %> 
     </div> 
     </div> 
     <div class="col-xs-6"> 
     <div class="input-group input-group-sm"> 
      <span class="input-group-addon" id="basic-addon1">$</span> 
      <%= f.text_field :max_price, class: "form-control", placeholder: "Max Rent", data: { "binding-name" => "max-price" } %> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

JSファイル：

$('#listing-price-selector').popover({ 
    html: true, 
    trigger: 'manual', 
    placement: 'bottom', 
    template: '<div class="popover price-range-pop" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>', 
    content: function() { 
    return $('#listing-price-content').html(); 
    } 
}); 

Answer 1

私は何が必要だと思うがポップオーバー内の入力のいずれかに変更イベント（からkeyup）から機能を起動することです。

ここで難しいことは、少なくとも私にとって、ポップオーバーのコンテンツは動的に生成されるため、ページの読み込み時にそれらの要素のイベントハンドラを割り当てようとすると機能しません。

これらの要素が生成されたら、イベントハンドラを割り当てるのは何ですか。

ハンドラを割り当てることができ、必要な場所に移動できる、ポップオーバー自体のために発生するイベントがあります。

$("[data-toggle='popover']").on('shown.bs.popover', function(){ 
    $("#listing-price-selector").next().find("#min-price").keyup(modPrice); 
    $("#listing-price-selector").next().find("#max-price").keyup(modPrice); 
}); 

であり、その後、価格範囲ボックスの値を固定する関数とすることができる。次のようなものがあります。

そこには、最大値が最小値を超えているか、好きなように処理するなど、さらに多くの処理を行うことができます。

希望すると便利です。 -

PS W3Schoolsのrefのページからポップオーバーイベントました：http://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp

PPSを - と楽しみのために、私はスニペットの例を作った、ここにある：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-md-2 col-xs-6"> 
 
    <a tabindex="0" class="button btn-transparent" id="listing-price-selector" role="button" data-toggle="popover">Price Range <span class="caret"></span></a> 
 
</div> 
 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="basic-addon1">$</span> 
 
    <input type="text" id="priceBox" /> 
 
</div> 
 

 

 
<div id="listing-price-content" style="display: none;"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <div class="input-group input-group-sm"> 
 
      <label>Min</label> 
 
      <span class="input-group-addon" id="basic-addon1">$</span> 
 
      <input type="text" id="min-price" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
     <div class="input-group input-group-sm"> 
 
      <label>Max</label> 
 
      <span class="input-group-addon" id="basic-addon1">$</span> 
 
      <input type="text" id="max-price" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script> 
 

 
$('#listing-price-selector').popover({ 
 
    html: true, 
 
    trigger: 'click', 
 
    placement: 'bottom', 
 
    template: '<div class="popover price-range-pop" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>', 
 
    content: function() { 
 
    return $('#listing-price-content').html(); 
 
} 
 
    
 
}); 
 

 
$("[data-toggle='popover']").on('shown.bs.popover', function(){ 
 
    $("#listing-price-selector").next().find("#min-price").keyup(modPrice); 
 
    $("#listing-price-selector").next().find("#max-price").keyup(modPrice); 
 
}); 
 

 
$("[data-toggle='popover']").on('hide.bs.popover', function(){ 
 
    modPrice(); 
 
}); 
 

 
function modPrice(){ 
 
    var mn = $("#listing-price-selector").next().find("#min-price").val(); 
 
    var mx = $("#listing-price-selector").next().find("#max-price").val(); 
 
    mn = (mn == "") ? 0 : mn; 
 
    mx = (mx == "") ? 0 : mx; 
 
    $("#priceBox").val(mn + " to " + mx); 
 
    $("#listing-price-selector").text(mn + " to " + mx); 
 
} 
 

 
</script>