質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

Javascript で追加した要素のイベントが動かなくなりました。

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,763

hidepon

score 188

Jvascriptで追加した要素に付与したclass 要素をクリックしても動かない状況になりました。

$('.pos').change(function(){
    var index    =        $(".pos").index(this) + 1;
    alert("index= " + index);
});
$('.pos').on('change','select', function(){    
   var index    =        $(".pos").index(this) + 1;
    alert("index= " + index);
});
<table class="table" id="tbl">
  <tbody>
    <tr>
      <td>
        <select name="depos" id="depos" class="form-control pos">
          <option value ="-----">選択してください</option>
          <option value ="45">制作</option>
          <option value ="46">企画</option>
        </select>
      </td>
      <td><input type="text" name="note1" class="note" /></td>
      <td><input type="button" value="登録" class="add" /></td>
    </tr>
  </tbody>
</table>
<p><button id="add" name="addrow">追加</button><p>


追加ボタンを押すと行が追加されます。
追加された行のプルダウンを変更した際の挙動です。
どちらもプルダウンの変更でalertのインデックス番号がアナウンスされません。
色々と調べていますが、よくわかりません。
宜しくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+2

 問題点

追加ボタンを押すと行が追加されます。 

大体想像はつきますが、再現性の為に「行を追加するコード」も追記した方が良いと思います。

  • jQuert#on は既存のノードにのみイベント定義され、後から動的に追加されたノードにまでは適用されません。
    親ノードでイベント定義するか、追加する度に追加するノードにイベント定義して下さい。
  • 行番号を取得したい場合は rowIndex を使用して下さい。

 ソースコード

<table class="table" id="tbl">
  <tbody>
    <tr>
      <td>
        <select name="depos" id="depos1" class="form-control pos">
          <option value ="-----">選択してください</option>
          <option value ="45">制作</option>
          <option value ="46">企画</option>
        </select>
      </td>
      <td><input type="text" name="note1" class="note" /></td>
      <td><input type="button" value="登録" class="add" /></td>
    </tr>
    <tr>
      <td>
        <select name="depos" id="depos2" class="form-control pos">
          <option value ="-----">選択してください</option>
          <option value ="45">制作</option>
          <option value ="46">企画</option>
        </select>
      </td>
      <td><input type="text" name="note1" class="note" /></td>
      <td><input type="button" value="登録" class="add" /></td>
    </tr>
  </tbody>
</table>
<p><button id="add" name="addrow">追加</button><p>

<script>
'use strict';
jQuery('#tbl').on('change', '.pos', function (event) {
  alert(event.currentTarget.parentNode.parentNode.rowIndex);
});
</script>

 iOS Safari Mobile で click イベントがバブリングしないバグ

jQuery API Document では下記のように書かれています。

On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:

- Use natively clickable elements such as a or button, as both of these do bubble to document.
- Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
- Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.

.live() | jQuery API Documentation

以下、意訳。

MobileiOS(iPhone、iPad、iPod Touch)では、click イベントはほとんどの要素で document, body にバブルしません。次の回避策の1つを使用して下さい。

- a要素、button要素等のネイティブでクリック可能な要素を使用して下さい。それらの要素は期待通りにバブルされます。
- Mobile iOS は document.body 配下の要素にはバブルします。document.body 配下の要素に .on(), .delegate() を適用して下さい。
- CSS style の "cursor:pointer" をクリックする要素に適用します。ただし、この適用によって要素のコピー\貼り付けを無効にし、タッチすると強調表示されます。・

他、MDN, stackoverflow にも情報があります。

Re: hidepon さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/24 16:05

    なるほどです。す・・・すごすぎます。
    1  jQuery('#tbl').
    2  $(document).on
    2はアップルのOSの場合はNGになるという考えで良いでしょうか?

    本当に有難うございます。

    キャンセル

  • 2017/05/24 17:37

    それは Mac OS, iOS等のApple製OS全てに適用されるのでしょうか。
    他の回答で触れられている iOS の件でしたら調べて、親記事にまとめました。

    質問がクローズされていないようですが、未解決であれば「追加ボタンを押すと行が追加されるコード」を質問文に追記して下さい。

    キャンセル

  • 2017/05/24 17:52

    > iOS Safari Mobile で click イベントがバブリングしないバグ
    そもそも、このバグが change イベントにも適用されるようには読めません。
    hidepon さんの環境(iOS)で再現性テストを行ってみてはいかがでしょうか。

    キャンセル

+1

JavaScriptにおいて「動かなくなる」はJavaScriptの文法や値が正常に取得できないなどエラーが起きているため、エラーが起きた場所で動作が止まってしまっているということがほとんどです。
お使いのブラウザのデベロッパーツールなどでコンソールにエラーが出力されていないか確認してください。

エラーが出力されていたら、そのエラーメッセージをもとに原因を追究し、対策していけます。

追記:
ひとつめですが以下では?

$('pos').change(function()
↓
$('.pos').change(function()

// 「.」がないのでクラスではなく「pos」というDOMを探しにいってこけてる

追記2:
index番号取得の方法が間違ってるのでは?

$(".pos").index(this)
↓
$(".pos").prop("selectedIndex")


こちらの環境では正常に取得できました(一番上が0)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/24 14:42

    有難うございます。こちら投稿時の入力ミスです。ソースにはドットをつけています、申し訳ございません。
    修正します。

    キャンセル

  • 2017/05/24 14:50 編集

    index取得方法が間違っていると思います。ご提示の方法では0しか取得できません。
    追記2をご確認ください。
    あと念のためエラーが出ていないかも。index取得方法を直してもエラーが出ていては動かない状態からは脱出できませんので。。

    キャンセル

+1

.posがselectにあるのでセレクタはいらないですね。

$('.pos').on('change', function() {


あるいは

$(document).on('change', 'select', function() {

また、取得したいものが本当にjQueryのindex()であるか、確認してみてください。
http://api.jquery.com/index/

ほしいのは、selectedIndexではないでしょうか?
https://developer.mozilla.org/ja/docs/Web/API/HTMLSelectElement/selectedIndex

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/24 15:53

    何番目のプルダウンかという情報が欲しかったのですが、行数であれば一番右の登録ボタンを押したときのindex で良いなと思いました。$(document).onというのが「iOS」で無効になるとかいう情報を見たのですが、これは大丈夫でしょうか?質問になりましたが・・・スミマセン、お願いいたします、

    キャンセル

  • 2017/05/24 16:09

    いや・・・何番目のプルダウンが必要かというのは必要でした。
    ご返答頂き有難うございました。

    キャンセル

  • 2017/05/24 16:15

    iOSの件はiOS8.4で修正済みだそうです。気になるようであれば、もっと下のところから見るとよいと思います。
    http://qiita.com/jshimazu/items/f9c148fa5e08f109179f

    select の change ですが、追加したときというより、選択を変えたときに発火してしまいます。
    ノードの変更監視をしたい場合は MutationObserver を使うか、そうでなければ追加処理のところで呼び出すようにしたほうがいいのではないでしょうか?

    キャンセル

0

訂正

追記拝見致しました。HTMLの方も掲載頂くと宜しいかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/24 14:21

    スミマセン。入力中に投稿ボタンをおしてしまったようです。慣れていなくて・・・申し訳ございませんでした。本当にごめんなさい

    キャンセル

  • 2017/05/24 14:40

    HTMLを追記しました。

    キャンセル

  • 2017/05/24 14:40

    追加ボタンをクリックで行が増えていきます。そのプルダウンの変更を行った際にアラーとが出てほしいんです

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る