How to make Js working within a post generated by JS?

Question

I am zero in JS. I don't know even A,B & C of JS. I am working on a form. Where I have to provide a facility to a user that he can add more than one contact number. Here is my HTML.

<li>
    <div id="contact-number-wrapper">
        <div class="contact-number">
            <div class="field-del">
                <a href="#" class="field-del-button"></a>
            </div>
            <!--end of field del-->
            <div class="field-title">
                <select name="country">
                    <option value="contact-number" selected>Contact Number</option>
                    <option value="office-number">Office Number</option>
                    <option value="house-number">House Number</option>
                    <option value="mobile-number">Mobile Number</option>
                </select>
            </div>
            <!--end of field title-->
            <div class="field-input">
                <input autocomplete="off" class="input" id="contact-text-field" name="contact-text-field" type="text" value="+92 333 8141255" placeholder="" />
            </div>
            <!--end of field input-->
            <div class="field-privacy">
                <dl id="sample4" class="dropdown"> <dt><a href="#"></a></dt>
                    <dd>
                        <ul>
                            <li><a href="#">Public</a></li>
                            <li><a href="#">Friends</a></li>
                            <li><a href="#">Only me</a></li>
                            <li><a href="#">Custom</a></li>
                        </ul>
                    </dd>
                </dl>
            </div>
            <!--end of field privacy--> <span class="clearfloater"></span>
        </div>
        <!--end of caontact number-->
    </div>
    <!--end of contact number wrapper-->
    <button id="b-0" class="btn add-more" type="button">
        <img src="images/profile-page/add-new-field.png" alt="" />Add another</button>
</li>

And this is my JS for developing a new entry field.

$(document).ready(function () {
    var next = 1;
    $(".add-more").click(function (e) {
        var newdiv = document.createElement('div');
        newdiv.className = 'contact-number' + next + '';
        document.getElementById('contact-number-wrapper').appendChild(newdiv);
        newdiv.innerHTML = '<div class="field-del"><a href="#" class="field-del-button"></a></div><!--end of field del--><div class="field-title"><select name="country"><option value="contact-number" selected>Contact Number</option><option value="office-number">Office Number</option><option value="house-number">House Number</option><option value="mobile-number">Mobile Number</option></select></div><!--end of field title--><div class="field-input"><input autocomplete="off" class="input new-entry" id="contact-text-field' + next + '" name="contact-text-field' + next + '" type="text" value="" placeholder="Add New Number" /></div><!--end of field input--><div class="field-privacy"><dl id="sample-3' + next + '" class="dropdown"><dt><a href="#"></a></dt><dd><ul><li><a href="#">Public</a></li><li><a href="#">Friends</a></li><li><a href="#">only me</a></li><li><a href="#">Custom</a></li></ul></dd></dl></div><!--end of field privacy--><script>$(".dropdown dt a").click(function(e){$(this).parent().next().fadeToggle("fast");});$(".dropdown dt a").blur(function(e){if ($(e.target).not(".dropdown ul")){$(".dropdown dd").fadeOut();}});</script><span class="clearfloater"></span>';
        next = next + 1;
    });
});

My problem is the drop down that I am using in this post. This is also a JS supported drop-down, it works in a static post but when I create a dynamic post or new post with JS then this drop-down doesn't works. Someone have told me to rebind the drop-down function in new post function. But I am null in JS I don't know how to do this. Please suggest me some thing that the privacy drop-down should work in new post too. Here is my Js code for the Privacy Settings dropdown (wrapped in field-privacy div in html).

$(".dropdown dt a").click(function(e){
    $(this).parent().next().fadeToggle("fast");
});
$(".dropdown dt a").blur(function(e){
    if ($(e.target).not(".dropdown ul")){
        $(".dropdown dd").fadeOut();
    }
});

How did you arrive at your code when you know literally nothing about JavaScript? — Tomalak, Jun 08 '15 at 06:36

score 1 · Accepted Answer · answered Jun 08 '15 at 06:47

This is actually a (very...) common question.

You have to use what is called "event delegation" :

$(document).on('click', ".dropdown dt a", function(e){
    $(this).parent().next().fadeToggle("fast");
});

$(document).on('blur', ".dropdown dt a" , function(e){
    if ($(e.target).not(".dropdown ul")){
        $(".dropdown dd").fadeOut();
    }
});

This works for present and future elements. It will listen for the creation of the elements and automatically bind events to them.

Thnx, Brother. It works perfectly. As I know nothing so I can't do easy or tough either. Thankx again — Muhammad Kamran, Jun 08 '15 at 06:56

How to make Js working within a post generated by JS?

1 Answers1