Ajaxでidを変更後も変更前に呼び出されるAjaxが呼ばれる

Question

以下のようなScriptを書いており、ボタンを押下すると、id="Apply"を"Applyed"に変更する処理を書いています。
$("#Apply").clickの処理は正常に行われ、画面上もID="Applyed"に変化するのですが、その後、idがApplyedになっているボタンを押下しても$("#Apply").clickのAjaxが起動してしまいます。

どのようにすれば、$("#Applyed").clickを起動させる事ができるのか不明の為、ご教授いただけますと幸いです。

<script>
$(document).ready(function () {
    function getCookie(name) {
    var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                 if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        crossDomain: false, // obviates need for sameOrigin test
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
});
//ここまでおまじないと思って記述
//以下Ajax
$("#Apply").click(function (event) {
    event.preventDefault();
    var ine = $(this);
    $.ajax({
        url: ine.attr('data-href'),
        method: 'POST',
        timeout: 10000,
        dataType: "json",
    })
    .done(function (data) {
　　　　　//ここでIDを変更している
        $('#Apply').attr("id","Applyed");
        var link = ine.attr('data-href').replace('apply_ajax/','apply_ajax/kaijo');
		$('#Applyed').attr("data-href",link);
		$('#Applyed').text("応募済");
		var text = ', <a href="/user/'+data.userid+'">'+data.username+'</a>'
		$('#applyhoge').append(text);
    })
    .fail(function (data) {
        alert("fail");
    })
});
//以下Ajax
$("#Applyed").click(function (event) {
    event.preventDefault();
    var ine = $(this);
    $.ajax({
        url: ine.attr('data-href'),
        method: 'POST',
        timeout: 10000,
        dataType: "json",
    })
    .done(function (d) {
        $('#Applyed').attr("id","Apply")
		$('#Applyed').attr("data-href","hogehoge")
    })
    .fail(function (data) {
        alert("fail");
    })
});
</script>

<a id="Apply" class="btn btn-primary" data-href="{% url 'apply' pk=list.0.pk time_id=i.0.id %}">応募済</a>aaa

Answer 1

質問の記述ですと、scriptタグが読み込まれた際に#Applyの要素にイベントリスナーを設定するという動作をしています
idを変更してもイベントリスナーは削除されませんので記載された挙動になります

また、#Applyedへのイベントリスナーの設定も読み込みの際に実行される記述になっていますが、要素が存在しないため行われません
id変更時に#Applyのイベントリスナー削除と#Applyedへのイベントリスナー設定を行う、別の要素に設定し表示・非表示を切り替える、idをイベント時に参照して動作を変更するなどするのが良いかと思います

Comments

[Test_ks]

ありがとうございます！