jqueryプラグインが正常に機能しません。アドバイスください。

お世話になります。2種のプラグインを取り入れてある制作物を作っているのですが、上手くいかずご教示願いたく投稿させて頂きました。

フォームで入力したデータをDBに登録する部分ですが、フォームを必要に応じて行を増やして登録したく、上記サイトを参考にしたのが以下ノースです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("click", ".add", function() {
$(this).parent().clone(true).insertAfter($(this).parent());
});
$(document).on("click", ".del", function() {
var target = $(this).parent();
if (target.parent().children().length > 1) {
target.remove();
}
});
</script>

<style type="text/css">
<!--
#input_plural {
margin: 10px 0;
}

#input_plural input.form-control1 {
display: inline-block;
width: 40%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
color: #555;
}

#input_plural input.form-control2 {
display: inline-block;
width: 40%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
color: #555;
}

#input_plural input.pluralBtn {
width: 30px;
height: 30px;
border: 1px solid #ccc;
background: #fff;
border-radius: 5px;
padding: 0;
margin: 0;
}
-->
</style>
</head>
<body>

<form>
<div id="input_pluralBox">
<div id="input_plural">
<input type="text" value="" name="karikamoku" class="karikamokuTags">
<input type="text" value="" name="torihkisaki" class="torihkisakiTags">
<input type="button" value="＋" class="add pluralBtn">
<input type="button" value="－" class="del pluralBtn">
</div>
</div>
</form>

</body>
</html>

また、入力するデータは決められたワードを入力したいため、タグ形式で入力するものとし
プラグイン（ http://aehlke.github.io/tag-it/ ）を利用させていただき用意したものが以下のソースです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>

<!--tagit-->
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="tagit/css/jquery.tagit.css">
<script type="text/javascript" src="tagit/js/tag-it.min.js"></script>

<script type="text/javascript">
$(function() {
	var tagList = ['現金','現金過不足','当座預金','普通預金','定期預金','その他預金'];
	$('.karikamokuTags').tagit({
	    removeConfirmation: true,
	    availableTags: tagList,
	    fieldName: "karikamoku",
	    tagLimit:1
	});

	var tagList = ['売掛金','未収賃貸料','有価証券','商品','棚卸資産','前払金','仮払金'];
	$('.torihkisakiTags').tagit({
	    removeConfirmation: true,
	    availableTags: tagList,
	    fieldName: "torihkisaki",
	    tagLimit:1
	});

});
</script>
<!--tagit-->

</head>
<body>


　　<div><input type="text" class="karikamokuTags" value="" name="karikamoku"></div>
　　<div><input type="text" class="torihkisakiTags" value="" name="torihkisaki"></div>


</body>
</html>

この2つのソースを参考に、

のように、フォームにタグを入力し、フォームを追加、そしてそのフォームにタグを入力、、、という流れをイメージしています。

こんな流れ。

この2つを組み合わせたソースがこちら。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>

<!--tagit-->
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="tagit/css/jquery.tagit.css">
<script type="text/javascript" src="tagit/js/tag-it.min.js"></script>

<script type="text/javascript">
$(function() {
	var tagList = ['現金','現金過不足','当座預金','普通預金','定期預金','その他預金'];
	$('.karikamokuTags').tagit({
	    removeConfirmation: true,
	    availableTags: tagList,
	    fieldName: "karikamoku",
	    tagLimit:1
	});

	var tagList = ['売掛金','未収賃貸料','有価証券','商品','棚卸資産','前払金','仮払金'];
	$('.torihkisakiTags').tagit({
	    removeConfirmation: true,
	    availableTags: tagList,
	    fieldName: "torihkisaki",
	    tagLimit:1
	});
});
</script>
<!--tagit-->



<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->
<script type="text/javascript">
$(document).on("click", ".add", function() {
    $(this).parent().clone(true).insertAfter($(this).parent());
});
$(document).on("click", ".del", function() {
    var target = $(this).parent();
    if (target.parent().children().length > 1) {
        target.remove();
    }
});
</script>

<style type="text/css">
<!--
#input_plural {
    margin: 10px 0;
}
 
#input_plural input.form-control1 {
    display: inline-block;
    width: 40%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
}

#input_plural input.form-control2 {
    display: inline-block;
    width: 40%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
}
 
#input_plural input.pluralBtn {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    margin: 0;
}
-->
</style>
</head>
<body>


<form>
<div id="input_pluralBox">
    <div id="input_plural">
        <input type="text" value="" name="karikamoku" class="karikamokuTags">
        <input type="text" value="" name="torihkisaki" class="torihkisakiTags">
        <input type="button" value="＋" class="add pluralBtn">
        <input type="button" value="－" class="del pluralBtn">
    </div>
</div>
</form>

 
</body>
</html>

しかし、このフォームでは以下の画像のように、思うような動きをしてくれません。

大変お恥ずかしい質問と恐縮していますが、javascriptの理解がないに等しく、今日1日中も図書館へ行き、本を片手に原因を探っていたのですが、そもそも理解がないため、原因を突き止めるまで至りませんでした。

お忙しい中恐縮ですが、どこが原因なのかご教示願うことは出来ませんでしょう。
よろしくお願いいたします。

行動規範の内容に同意します

回答3件

.cloneで要素をコピーしているからです。

jQueryで新たに要素を作る必要があります。
以下をコピペしてみてください。

js
1
2$(document).on("click", ".add", function() {
3  $(`<div id="input_plural">
4<input type="text" value="" name="karikamoku" class="karikamokuTags">
5<input type="text" value="" name="torihkisaki" class="torihkisakiTags">
6<input type="button" value="＋" class="add pluralBtn">
7<input type="button" value="－" class="del pluralBtn">
8</div>`).insertAfter($(this).parent());
9});
10$(document).on("click", ".del", function() {
11var target = $(this).parent();
12if (target.parent().children().length > 1) {
13target.remove();
14}
15});
16

投稿2020/01/22 01:56

kyoya0819

総合スコア10429

kyoya0819

2020/01/22 02:56

https://codepen.io/asuchi0819/pen/KKwboWm?editors=0010 サンプルです。

chapp

2020/01/22 06:16

asuchi0819さんお忙しい中、サンプルまでご提示いただきありがとうございます。感謝です。早速とばかりご提示いただいたソースを既存のものと差し替えてみましたが、新しい行は未入力の状態で追加されるものの、新しい行（フォーム）ではタグを呼び出すことが出来ない状態になっています。単純に既存のソースとご提示いただいたソースを差し替えただけです。設置の仕方がおかしかったでしょうか？（IDの部分はclassに変更しています）引続き、アドバイスのほど頂戴出来たら幸いです。よろしくお願いいたします。

行動規範の内容に同意します

まず、その「増やしたり……」のサンプルは id が重複するためよくないです。 id="input_plural" は削除するか class に変更しておきます。

次に、.tagit() を呼ぶと要素が追加されたりするので、呼ぶ前の状態の clone をテンプレートとして保持しておき、追加時に利用します。

jQuery
1$(function() {
2    var template = $('#input_pluralBox>*').clone(false);

jQuery
1        //$(this).parent().clone(true).insertAfter($(this).parent());
2        var clone = template.clone(false);
3        clone.insertAfter($(this).parent());

追加した分にも .tagit() を呼んでください。
https://api.jquery.com/clone/

投稿2020/01/22 05:03

編集2020/01/22 06:59

x_x

総合スコア13749

chapp

2020/01/22 06:22

x_xさんお忙しい中での回答、ありがとうございます。ソースまでご提示頂き感謝いたします。 2つのソースをご提示いただきましたが、1つ目に提示いただいたソースは「追加」であり、2つ目のソースは「変更」という認識で宜しかったですか？この認識のまま「追加、変更」を加えたところ、新しい行（フォーム）が追加されないという状況となっています。「追加した分にも .tagit() を読んでください。」とのこと、参考サイトもご案内頂いていますが、もう少し、どの部分を見るべきかご教示いただけると助かります。お恥ずかしい話で恐縮です。よろしくお願いいたします。

x_x

2020/01/22 06:59

すみません、「呼んでください」です。修正します

chapp

2020/01/22 09:24

x_xさんお忙しい中ありがとうございます。 >すみません、「呼んでください」です。とんでもありません、誤解させてしまったようですみません。仰っている意味は理解しています。決して揚げ足取りではなく、リンクを張っていただいたので、多くあるスクリプトの中で、どこが重要な場所なのか？お教えいただきたく質問した次第です。それから修正頂いたとのこと、改めて感謝いたします。ただ、差し替えてみたものの、追加が出来ない状態となっています。お忙しい中恐れ入りますが、引き続きアドバイスのほど頂戴できれば幸いです。よろしくお願いいたします。

x_x

2020/01/23 08:45

デベロッパーツールでエラーが出ていないか確認してみてください。そしてどうすればエラーが出なくなるか考えてみてください。

chapp

2020/01/23 14:58

お返事ありがとうございます。ご提示いただいたスクリプトのところでエラーが出ています。デベロッパーツールの活用は役立つのでしょうね。ありがとうございます。ただ、活用できるまで理解を深めたいものの、Javascriptの知識が乏しく、まだ活用できるまでに至らず、ご提示いただいたスクリプトのところでエラーが出ていることで、逆に混乱しています。

x_x

2020/01/24 06:05

エラーメッセージは読んだのでしょうか？インデントの深さもヒントとなっています。

chapp

2020/01/24 08:48

アドバイスをありがとうございます。理解を深めるためにも探ってみます。取急ぎのお返事ですが。また改めてご報告させていただきます。

行動規範の内容に同意します

ベストアンサー

他の方の回答も取り入れて修正してみましたが、
先に断っておくとこの修正は追加、削除ともどのボタンを押しても末尾が変更されます。
中間の要素を変更すると難易度が跳ね上がるからです。
~~統合版のscriptとbody部分に修正を入れています。~~
HTMLの全ソースを貼っておきます。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title></title>
6
7<!--tagit-->
8<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
9<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
10<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
11<link rel="stylesheet" type="text/css" href="tagit/css/jquery.tagit.css">
12<script type="text/javascript" src="tagit/js/tag-it.min.js"></script>
13
14<script type="text/javascript">
15var template;
16var addKarikamokuTagit = function(idx) {
17    var tagList = ['現金','現金過不足','当座預金','普通預金','定期預金','その他預金'];
18    $('input[name="karikamoku' + idx + '"]').tagit({
19        removeConfirmation: true,
20        availableTags: tagList,
21        fieldName: "karikamoku" + idx,
22        tagLimit:1
23    });
24};
25var addTorihkisakiTagit = function(idx) {
26    var tagList = ['売掛金','未収賃貸料','有価証券','商品','棚卸資産','前払金','仮払金'];
27    $('input[name="torihkisaki' + idx + '"]').tagit({
28        removeConfirmation: true,
29        availableTags: tagList,
30        fieldName: "torihkisaki" + idx,
31        tagLimit:1
32    });
33};
34
35$(function() {
36    template = $('.input_plural').clone(true);
37    addKarikamokuTagit(1);
38    addTorihkisakiTagit(1);
39});
40$(document).on("click", ".add", function() {
41    var clone = template.clone(true);
42    var addIndex = $('.input_plural').length + 1;
43    clone.children(".karikamokuTags").attr('name', 'karikamoku' + addIndex);
44    clone.children(".torihkisakiTags").attr('name', 'torihkisaki' + addIndex);
45    $('.input_plural').last().after(clone);
46    addKarikamokuTagit(addIndex);
47    addTorihkisakiTagit(addIndex);
48});
49$(document).on("click", ".del", function() {
50    var target = $(this).parent();
51    if ($('.input_plural').length > 1) {
52        $('.input_plural').last().remove();
53    }
54});
55</script>
56
57<style type="text/css">
58<!--
59#input_plural {
60    margin: 10px 0;
61}
62
63#input_plural input.form-control1 {
64    display: inline-block;
65    width: 40%;
66    height: 34px;
67    padding: 6px 12px;
68    font-size: 14px;
69    color: #555;
70}
71
72#input_plural input.form-control2 {
73    display: inline-block;
74    width: 40%;
75    height: 34px;
76    padding: 6px 12px;
77    font-size: 14px;
78    color: #555;
79}
80
81#input_plural input.pluralBtn {
82    width: 30px;
83    height: 30px;
84    border: 1px solid #ccc;
85    background: #fff;
86    border-radius: 5px;
87    padding: 0;
88    margin: 0;
89}
90-->
91</style>
92</head>
93<body>
94<form>
95<div id="input_pluralBox">
96    <div class="input_plural">
97        <input type="text" value="" name="karikamoku1" class="karikamokuTags">
98        <input type="text" value="" name="torihkisaki1" class="torihkisakiTags">
99        <input type="button" value="＋" class="add pluralBtn">
100        <input type="button" value="－" class="del pluralBtn">
101    </div>
102</div>
103</form>
104</body>
105</html>

処理のおおまかな説明ですが、.tagit部分のfieldName:部分に設定する名前は一意でないといけません。
不具合動作で報告されている下のテキストフィールドのタグを消すと上のが消えるのは、
テキストフィールドのnameが同一のため区別が付かず上の要素が優先で処理されて下の要素が無視されているからでしょう。
そのため私の修正ではinput_pluralの要素数に合わせて数値を割り当てる処理を追加し、
テキストフィールドのnameと.tagitのfieldName:に設定しています。

ここで最初に言及している話になりますが、中間の要素を変更をしようとすると、
中間の要素のnameの数値が大きくなったり欠番の危険性が出ます。
それを防ぐにはinput_plural要素の変更を行うたびにnameの数値を上から順番に割り振り直す必要がありますが、
最も厄介なのが.tagitにもfieldName:にも数値を割り当てた名前を設定しているので、
それも探し出して値を変更しないといけません。

これをやるのはJavascriptを読んで処理を理解できるなり、
デベロッパーツールで.tagitが何の要素を追加したか把握できるなりしないと無理なので、
余りにも難しくなりそうなので一旦この部分は省かせて頂きました。

投稿2020/01/27 04:50

編集2020/01/27 08:17

yureighost

総合スコア2183

chapp

2020/01/27 07:39

yureighostさんご親切なアドバイスをありがとうございます。「なるほどねぇ」と思いながら、説明を読んでおりました。デベロッパーツールから読み取ろうとしていましたが、javascriptの理解が乏しく、先に進めずいた次第です。感謝いたします。話が前後しますが、ご提示いただいたソースは、私が質問時に掲載した3つ目のソース部の、javascript部とform部をそのまま差し替えるという認識で宜しかったでしょうか？実はその認識で差し替えたものの、タグキーワードも、追加・削除も出来ない状態です。きちんと動かしながら、yureighostさんの説明を参照しながら理解をしたいと思っていたので、もしこの認識に誤りがありましたらご指摘ください。引続き、アドバイスのほど頂戴出来たら幸いです。よろしくお願いいたします。

yureighost

2020/01/27 08:44

とりあえず全ソースを貼りました。これで動作確認してみてください。

chapp

2020/01/29 13:46

yureighostさんこんばんは。ソース拝見しました。ご親切な対応に感謝いたします。きちんと動作するまで確認いたしました。修正頂きながらも、タイミング悪くPCの前で腰を据える時間が持てず、お返事出来ずにいましたことお詫びいたします。動かしながら、yureighostさんの説明を読み返しています。これからjavascriptの理解を深めていきたく思っています。貴重なお時間、ありがとうございました。

行動規範の内容に同意します

あなたの回答