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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

4回答

2965閲覧

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

hidepon

総合スコア206

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2017/05/24 05:13

編集2017/05/24 05:43

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のインデックス番号がアナウンスされません。
色々と調べていますが、よくわかりません。
宜しくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

問題点

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

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

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

ソースコード

JavaScript

1<table class="table" id="tbl"> 2 <tbody> 3 <tr> 4 <td> 5 <select name="depos" id="depos1" class="form-control pos"> 6 <option value ="-----">選択してください</option> 7 <option value ="45">制作</option> 8 <option value ="46">企画</option> 9 </select> 10 </td> 11 <td><input type="text" name="note1" class="note" /></td> 12 <td><input type="button" value="登録" class="add" /></td> 13 </tr> 14 <tr> 15 <td> 16 <select name="depos" id="depos2" class="form-control pos"> 17 <option value ="-----">選択してください</option> 18 <option value ="45">制作</option> 19 <option value ="46">企画</option> 20 </select> 21 </td> 22 <td><input type="text" name="note1" class="note" /></td> 23 <td><input type="button" value="登録" class="add" /></td> 24 </tr> 25 </tbody> 26</table> 27<p><button id="add" name="addrow">追加</button><p> 28 29<script> 30'use strict'; 31jQuery('#tbl').on('change', '.pos', function (event) { 32 alert(event.currentTarget.parentNode.parentNode.rowIndex); 33}); 34</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 06:34

編集2017/05/24 08:35
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hidepon

2017/05/24 07:05

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

2017/05/24 08:37

それは Mac OS, iOS等のApple製OS全てに適用されるのでしょうか。 他の回答で触れられている iOS の件でしたら調べて、親記事にまとめました。 質問がクローズされていないようですが、未解決であれば「追加ボタンを押すと行が追加されるコード」を質問文に追記して下さい。
think49

2017/05/24 08:52

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

0

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

JavaScript

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

あるいは

JavaScript

1$(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 06:01

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hidepon

2017/05/24 06:53

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

2017/05/24 07:09

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

2017/05/24 07:15

iOSの件はiOS8.4で修正済みだそうです。気になるようであれば、もっと下のところから見るとよいと思います。 http://qiita.com/jshimazu/items/f9c148fa5e08f109179f select の change ですが、追加したときというより、選択を変えたときに発火してしまいます。 ノードの変更監視をしたい場合は MutationObserver を使うか、そうでなければ追加処理のところで呼び出すようにしたほうがいいのではないでしょうか?
guest

0

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

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

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

$('pos').change(function() ↓ $('.pos').change(function() // 「.」がないのでクラスではなく「pos」というDOMを探しにいってこけてる

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

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

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

投稿2017/05/24 05:35

編集2017/05/24 05:49
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hidepon

2017/05/24 05:42

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

2017/05/24 05:51 編集

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

0

訂正

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

投稿2017/05/24 05:18

編集2017/05/24 05:21
harashow1701

総合スコア854

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hidepon

2017/05/24 05:21

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

2017/05/24 05:40

HTMLを追記しました。
hidepon

2017/05/24 05:40

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問