removeClassとaddClassでクラス名を削除してから新しいクラス名に変えても、元のクラス名でも発火が起こる。

Question

htmlとjavascriptで機能の実装を行なっています。
あるスペースをクリックすると、画像ファイルが開き、画像選択をするとその画像と一緒にスペースが分割されるように設定しています。
しかし、最初の分割(二分割)は上手くいっても、三分割目以降が上手くいかない状態です。

これは、元のクラス名をremoveClassで削除し、addClassで置き換えることでそのクラスで調整したスペースを構築しているのですが、三分割目以降になると元のクラス名が新しいクラス名で置き換わっているにも関わらず、再び発火してしまっているのが原因です。

下記のコードでいうと、javascriptの、
$(".have-item").change(function(e){
$("#items").removeClass("have-item").addClass("have-item-1")
$("#dropbox").removeClass("have-item").addClass("have-item-1")
〜
reader.readAsDataURL(file);
})

が実行された後に、

$(".have-item−1").change(function(e){
$("#items").removeClass("have-item-1").addClass("have-item-2")
$("#dropbox").removeClass("have-item-1").addClass("have-item-2")
〜
reader.readAsDataURL(file);
})

が実行されるはずが、実行されずに

$(".have-item").change(function(e){
$("#items").removeClass("have-item").addClass("have-item-1")
$("#dropbox").removeClass("have-item").addClass("have-item-1")
〜
reader.readAsDataURL(file);
})

がもう一度実行されてしまっています。

クラス名が別のクラス名に置き換わっているにも関わらず再び発火する理由がなんなのか、その発火を一度だけに留める方法が何なのか、ご教授いただければ幸いです。

よろしくお願いします。

<div class="sell-dropbox-container clearfix">
  <div class="sell-upload-items have-item", id="items">
     <ul>
     </ul>
  </div>
  <div class="sell-upload-drop-box have-item", id="dropbox">
    <img class="m-preview">
    <%= fields_for(@item) do |f| %>
      <input type="file" class="sell-upload-drop-file" multiple="" 
      name="image1" style="display: none;">
      <%= f.file_field :image %>
      <pre class="visible-pc">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</pre>
    <% end %>
  </div>
</div>

$(function(){

  function buildIMAGE1(){
    var html = ` <li class="sell-upload-item">
                   <figure class="sell-upload-figure figure-1">
                     <img>
                   </figure>
                   <div class="sell-upload-button">
                     <a href="" class="sell-upload-edit">編集</a>
                     <a href="">削除</a>
                   </div>
                 </li>`
    return html;
  }

  function buildIMAGE2(){
    var html = ` <li class="sell-upload-item">
                   <figure class="sell-upload-figure figure-2">
                     <img>
                   </figure>
                   <div class="sell-upload-button">
                     <a href="" class="sell-upload-edit">編集</a>
                     <a href="">削除</a>
                   </div>
                 </li>`
    return html;
  }
　
  //二分割
  $(".have-item").change(function(e){
    $("#items").removeClass("have-item").addClass("have-item-1")
    $("#dropbox").removeClass("have-item").addClass("have-item-1")
    var html = buildIMAGE1()
    $("ul").append(html)
    var file = e.target.files[0];
    var reader = new FileReader();
    var IdentifiedImg = $(".figure-1").children("img");
    reader.onload = (function(file){
      return function(e){
        IdentifiedImg.attr("src", e.target.result);
        IdentifiedImg.attr("title", file.name);
      };
    })(file);
    reader.readAsDataURL(file);
  })
　//三分割
   $(".have-item-1").change(function(e){
    $("#items").removeClass("have-item-1").addClass("have-item-2")
    $("#dropbox").removeClass("have-item-1").addClass("have-item-2")
    var html = buildIMAGE2()
     $("ul").append(html)
     var file = e.target.files[0];
     var reader = new FileReader();
     var IdentifiedImg = $(".figure-2").children("img");
     reader.onload = (function(file){
      return function(e){
       IdentifiedImg.attr("src", e.target.result);
       IdentifiedImg.attr("title", file.name);
       };
     })(file);
     reader.readAsDataURL(file);
   })
 })

Comments

[m.ts10806]

「jQuery」をタグに追加されては

[hiromats]

申し訳ありません。追加しました。

Answer 1

クラスを動的にかえてもロード時に指定をしていれば引き継がれます

<script>
$(function(){
  $('#btn').on('click',function(){
    $('.a').removeClass('a').addClass('b').val('B');
  });
  $('.a').on('click',function(){
    console.log('a1');
  });
  $(document).on('click','.a',function(){
    console.log('a2');
  });
  $('.b').on('click',function(){
    console.log('b1');
  })
  $(document).on('click','.b',function(){
    console.log('b2');
  })
});
</script>

<input type="button" class="a" value="A">
<input type="button" id="btn" value="切り替え">

• 最初「A」をおすと、a1,a2が表示されます
• 切り替えボタンを押すと「B」に変わります
• 「B」を押しても当初指定した「a1」はそのまま反応し、

「a2」は制御から外れ「b2」が制御に貼ります
このとき「b1」はロード時に確定していないので処理されません

Comments

[hiromats]

回答ありがとうございます。
理屈は理解できたのですが、そちらが回答してくださったのを例に出すと、Aボタンだけを押して、a2の制御を外してb2に切り替えを行いたいんですよね。

[hiromats]

$(".have-item").change(function(e){
を
$(document).on("change", ".have-item", function(e){
に変更したらいけました！
ありがとうございます！！