Así que tengo esta tabla y he agregado algunos botones dentro de las celdas de la tabla.
<table border="1"> <tr> <th><button id="0" class="mybtn" >1</button><div class="myDiv"></div></th> <th><button id="1" class="mybtn">2</button><div class="myDiv"></div></th> <th><button id="2" class="mybtn" >3</button><div class="myDiv"></div></th> </tr> </table>Cuando hago clic en los botones, quiero que agreguen un campo de texto. Pero cuando hago clic en él, los tres botones funcionan al mismo tiempo.
Aquí está mi código jQuery
$(document).ready(function() { $(".mybtn").on("click",function() { $(".myDiv").append("<div><br><input type='text' /><br></div>"); }); });¿Cómo hacer que los botones funcionen de forma independiente?
Utilice parent('th').find('.myDiv') .
$(".mybtn").on("click", function() { $(this).parent('th').find('.myDiv').append("<div><br><input type='text' /><br></div>"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1"> <tr> <th><button id="0" class="mybtn">1</button> <div class="myDiv"></div> </th> <th><button id="1" class="mybtn">2</button> <div class="myDiv"></div> </th> <th><button id="2" class="mybtn">3</button> <div class="myDiv"></div> </th> </tr> </table>Todo lo que tienes que hacer es usar $(this).next(".myDiv")
$(document).ready(function() { $(".mybtn").on("click", function() { $(this).next(".myDiv").append("<div><br><input type='text' /><br></div>"); }); });Manifestación
$(document).ready(function() { $(".mybtn").on("click", function() { $(this).next(".myDiv").append("<div><br><input type='text' /><br></div>"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1"> <tr> <th><button id="0" class="mybtn">1</button> <div class="myDiv"></div> </th> <th><button id="1" class="mybtn">2</button> <div class="myDiv"></div> </th> <th><button id="2" class="mybtn">3</button> <div class="myDiv"></div> </th> </tr> </table>Bueno, tiene 3 divs que tienen la clase "myDiv", por lo que el código se ejecuta en los tres si hace clic en cualquier botón:
$(".myDiv").append("<div><br><input type='text' /><br></div>");Trabaje con ID o seleccione el contenedor principal y use jQuery $(this) y find() para buscar el div con la clase "myDiv" SOLAMENTE en el contenedor principal.