change visibility with attr() with click event binding

up vote
0
down vote

favorite

I'm trying to use the attr() method to change the visibility of the input and select siblings.

The add button works for all hidden elements, but when I want to add the hidden attribute back onto the form elements nothing happens.

$(function() {

    $("button[name='add']").click(addSeries);

});



$(function() {

    $("button[name='remove']").click(removeSeries);

});



function addSeries() {

    $(this).siblings("input").removeAttr("hidden");

    $(this).siblings("select").removeAttr("hidden");

    $(this).parent().append("<button name='remove' type='button'>-</button>");

    $(this).remove();

}



function removeSeries() {

    console.log($(this)); //nothing logged

    console.log($(this).siblings("input")); //nothing logged

    console.log($(this).siblings("select")); //nothing logged

    $(this).siblings("input").attr("hidden");

    $(this).siblings("select").attr("hidden");

    $(this).parent().append("<button name='add' type='button'>+</button>");

    $(this).remove();

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

I'm not well seasoned with javascript, so it may be something simple that I'm missing.

Any help is appreciated, thank you!

asked Nov 22 at 16:26

287

add a comment |

up vote
0
down vote

favorite

I'm trying to use the attr() method to change the visibility of the input and select siblings.

The add button works for all hidden elements, but when I want to add the hidden attribute back onto the form elements nothing happens.

$(function() {

    $("button[name='add']").click(addSeries);

});



$(function() {

    $("button[name='remove']").click(removeSeries);

});



function addSeries() {

    $(this).siblings("input").removeAttr("hidden");

    $(this).siblings("select").removeAttr("hidden");

    $(this).parent().append("<button name='remove' type='button'>-</button>");

    $(this).remove();

}



function removeSeries() {

    console.log($(this)); //nothing logged

    console.log($(this).siblings("input")); //nothing logged

    console.log($(this).siblings("select")); //nothing logged

    $(this).siblings("input").attr("hidden");

    $(this).siblings("select").attr("hidden");

    $(this).parent().append("<button name='add' type='button'>+</button>");

    $(this).remove();

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

I'm not well seasoned with javascript, so it may be something simple that I'm missing.

Any help is appreciated, thank you!

asked Nov 22 at 16:26

287

add a comment |

up vote
0
down vote

favorite

I'm trying to use the attr() method to change the visibility of the input and select siblings.

The add button works for all hidden elements, but when I want to add the hidden attribute back onto the form elements nothing happens.

$(function() {

    $("button[name='add']").click(addSeries);

});



$(function() {

    $("button[name='remove']").click(removeSeries);

});



function addSeries() {

    $(this).siblings("input").removeAttr("hidden");

    $(this).siblings("select").removeAttr("hidden");

    $(this).parent().append("<button name='remove' type='button'>-</button>");

    $(this).remove();

}



function removeSeries() {

    console.log($(this)); //nothing logged

    console.log($(this).siblings("input")); //nothing logged

    console.log($(this).siblings("select")); //nothing logged

    $(this).siblings("input").attr("hidden");

    $(this).siblings("select").attr("hidden");

    $(this).parent().append("<button name='add' type='button'>+</button>");

    $(this).remove();

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

I'm not well seasoned with javascript, so it may be something simple that I'm missing.

Any help is appreciated, thank you!

asked Nov 22 at 16:26

287

I'm trying to use the attr() method to change the visibility of the input and select siblings.

The add button works for all hidden elements, but when I want to add the hidden attribute back onto the form elements nothing happens.

$(function() {

    $("button[name='add']").click(addSeries);

});



$(function() {

    $("button[name='remove']").click(removeSeries);

});



function addSeries() {

    $(this).siblings("input").removeAttr("hidden");

    $(this).siblings("select").removeAttr("hidden");

    $(this).parent().append("<button name='remove' type='button'>-</button>");

    $(this).remove();

}



function removeSeries() {

    console.log($(this)); //nothing logged

    console.log($(this).siblings("input")); //nothing logged

    console.log($(this).siblings("select")); //nothing logged

    $(this).siblings("input").attr("hidden");

    $(this).siblings("select").attr("hidden");

    $(this).parent().append("<button name='add' type='button'>+</button>");

    $(this).remove();

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

I'm not well seasoned with javascript, so it may be something simple that I'm missing.

Any help is appreciated, thank you!

$(function() {

    $("button[name='add']").click(addSeries);

});



$(function() {

    $("button[name='remove']").click(removeSeries);

});



function addSeries() {

    $(this).siblings("input").removeAttr("hidden");

    $(this).siblings("select").removeAttr("hidden");

    $(this).parent().append("<button name='remove' type='button'>-</button>");

    $(this).remove();

}



function removeSeries() {

    console.log($(this)); //nothing logged

    console.log($(this).siblings("input")); //nothing logged

    console.log($(this).siblings("select")); //nothing logged

    $(this).siblings("input").attr("hidden");

    $(this).siblings("select").attr("hidden");

    $(this).parent().append("<button name='add' type='button'>+</button>");

    $(this).remove();

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

$(function() {

    $("button[name='add']").click(addSeries);

});



$(function() {

    $("button[name='remove']").click(removeSeries);

});



function addSeries() {

    $(this).siblings("input").removeAttr("hidden");

    $(this).siblings("select").removeAttr("hidden");

    $(this).parent().append("<button name='remove' type='button'>-</button>");

    $(this).remove();

}



function removeSeries() {

    console.log($(this)); //nothing logged

    console.log($(this).siblings("input")); //nothing logged

    console.log($(this).siblings("select")); //nothing logged

    $(this).siblings("input").attr("hidden");

    $(this).siblings("select").attr("hidden");

    $(this).parent().append("<button name='add' type='button'>+</button>");

    $(this).remove();

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

javascript jquery html

asked Nov 22 at 16:26

287

asked Nov 22 at 16:26

287

asked Nov 22 at 16:26

287

asked Nov 22 at 16:26

287

asked Nov 22 at 16:26

287

add a comment |

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

you tried to attach event to future elements and you can do that with $(document)

try this hope it help

$(function() {

    $(document).on("click","button[name='add']",addSeries);

});



$(function() {

    $(document).on("click","button[name='remove']",removeSeries);

});



function addSeries() {

  $(this).parent().find("input,select").removeAttr("hidden");

  $(this).attr("name","remove").html("-");

}



function removeSeries() {

  $(this).parent().find("input,select").attr("hidden","");

  $(this).attr("name","add").html("+");

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

answered Nov 22 at 16:37

abdulsattar-alkhalaf

31715

That's a great help! Thank you, works perfectly.
– cookies
Nov 22 at 16:44

you are welcome bro
– abdulsattar-alkhalaf
Nov 22 at 16:45

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435002%2fchange-visibility-with-attr-with-click-event-binding%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

you tried to attach event to future elements and you can do that with $(document)

try this hope it help

$(function() {

    $(document).on("click","button[name='add']",addSeries);

});



$(function() {

    $(document).on("click","button[name='remove']",removeSeries);

});



function addSeries() {

  $(this).parent().find("input,select").removeAttr("hidden");

  $(this).attr("name","remove").html("-");

}



function removeSeries() {

  $(this).parent().find("input,select").attr("hidden","");

  $(this).attr("name","add").html("+");

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

answered Nov 22 at 16:37

abdulsattar-alkhalaf

31715

That's a great help! Thank you, works perfectly.
– cookies
Nov 22 at 16:44

you are welcome bro
– abdulsattar-alkhalaf
Nov 22 at 16:45

add a comment |

up vote
2
down vote

accepted

you tried to attach event to future elements and you can do that with $(document)

try this hope it help

$(function() {

    $(document).on("click","button[name='add']",addSeries);

});



$(function() {

    $(document).on("click","button[name='remove']",removeSeries);

});



function addSeries() {

  $(this).parent().find("input,select").removeAttr("hidden");

  $(this).attr("name","remove").html("-");

}



function removeSeries() {

  $(this).parent().find("input,select").attr("hidden","");

  $(this).attr("name","add").html("+");

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

answered Nov 22 at 16:37

abdulsattar-alkhalaf

31715

That's a great help! Thank you, works perfectly.
– cookies
Nov 22 at 16:44

you are welcome bro
– abdulsattar-alkhalaf
Nov 22 at 16:45

add a comment |

up vote
2
down vote

accepted

you tried to attach event to future elements and you can do that with $(document)

try this hope it help

$(function() {

    $(document).on("click","button[name='add']",addSeries);

});



$(function() {

    $(document).on("click","button[name='remove']",removeSeries);

});



function addSeries() {

  $(this).parent().find("input,select").removeAttr("hidden");

  $(this).attr("name","remove").html("-");

}



function removeSeries() {

  $(this).parent().find("input,select").attr("hidden","");

  $(this).attr("name","add").html("+");

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

answered Nov 22 at 16:37

abdulsattar-alkhalaf

31715

you tried to attach event to future elements and you can do that with $(document)

try this hope it help

$(function() {

    $(document).on("click","button[name='add']",addSeries);

});



$(function() {

    $(document).on("click","button[name='remove']",removeSeries);

});



function addSeries() {

  $(this).parent().find("input,select").removeAttr("hidden");

  $(this).attr("name","remove").html("-");

}



function removeSeries() {

  $(this).parent().find("input,select").attr("hidden","");

  $(this).attr("name","add").html("+");

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

$(function() {

    $(document).on("click","button[name='add']",addSeries);

});



$(function() {

    $(document).on("click","button[name='remove']",removeSeries);

});



function addSeries() {

  $(this).parent().find("input,select").removeAttr("hidden");

  $(this).attr("name","remove").html("-");

}



function removeSeries() {

  $(this).parent().find("input,select").attr("hidden","");

  $(this).attr("name","add").html("+");

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

$(function() {

    $(document).on("click","button[name='add']",addSeries);

});



$(function() {

    $(document).on("click","button[name='remove']",removeSeries);

});



function addSeries() {

  $(this).parent().find("input,select").removeAttr("hidden");

  $(this).attr("name","remove").html("-");

}



function removeSeries() {

  $(this).parent().find("input,select").attr("hidden","");

  $(this).attr("name","add").html("+");

}

<html>



<head>

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>

</head>



<body>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">

        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>

        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>

            <option disabled selected>Chart Type</option>

            <option value="1">Column</option>

            <option value="2">Line</option>

            <option value="4">Stacked Column</option>

            <option value="5">Stacked Line</option>

        </select>

        <button name="add" type="button">+</button>

    </div>

</body>



</html>

answered Nov 22 at 16:37

abdulsattar-alkhalaf

31715

answered Nov 22 at 16:37

abdulsattar-alkhalaf

31715

answered Nov 22 at 16:37

abdulsattar-alkhalaf

31715

answered Nov 22 at 16:37

abdulsattar-alkhalaf

31715

That's a great help! Thank you, works perfectly.
– cookies
Nov 22 at 16:44

you are welcome bro
– abdulsattar-alkhalaf
Nov 22 at 16:45

add a comment |

That's a great help! Thank you, works perfectly.
– cookies
Nov 22 at 16:44

you are welcome bro
– abdulsattar-alkhalaf
Nov 22 at 16:45

That's a great help! Thank you, works perfectly.
– cookies
Nov 22 at 16:44

you are welcome bro
– abdulsattar-alkhalaf
Nov 22 at 16:45

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi