Question

所以我在桌子上有多个删除按钮，每个按钮都有自己唯一的ID。我试图通过javascript获取此值，但我无法让它工作。

这是一个正常工作的部分js并加载正确的html（这是为每部电影运行的）：

function createRow(movie) {
        movie.NewDate = new Date(movie.ReleaseDate);
        return '<tr><td><img class="movieImage" src="' +
            movie.ImageLink +
            '" alt="' +
            movie.Title +
            ' Image" style="width:50px;height:75px">' +
            '<td>' +
            movie.Title +
            '</td><td>' +
            movie.NewDate.toLocaleDateString("en-US") +
            '</td><td><button type="button" class="removeButton" value="' + movie.DVDID + '">Delete</button></td></tr>';
    }

这是我试图检索id的js：

$(document)
.ready(function () {
    var deleteButtons = $(".removeButton");
    deleteButtons.each(function (index) {
        var currentButton = $(this);
        var buttonValue = currentButton.val();
        currentButton.click(function () {
            alert(buttonValue);
        });
    });
});

我通过Click one of multiple buttons, put value in text input

找到了最后一个代码段

现在只需获得适当的警报即可。

Answer 1

您的javascript应如下所示：

$(document).ready(function () {
    var deleteButtons = $(".removeButton");
    deleteButtons.on('click', function() {
        alert($(this).attr('value'));
    });
});

此外，由于您使用javascript动态添加这些按钮，因此在添加新行后可能需要重新绑定按钮单击事件。在将按钮html加载到DOM之后也应该进行绑定。

Answer 2

你尝试过这种方法吗？ $（＆＃34;＃tableId＆＃34;）。on（＆＃34; click＆＃34;，＆＃34; .removeButton＆＃34;，function（）{alert（$（this）.attr（＆＃34） ;值＆＃34;））;}）

这＆＃34; on＆＃34;绑定所有＆＃34; .removeButton＆＃34;触发点击时具有给定功能的元素。

Answer 3

由于您是动态创建按钮，因此无法正确访问它们，因为启动javascript时它们并不存在于DOM中。因此，为了能够找到按钮，您必须查看文档范围，然后找到您单击的按钮（类），如下所示：

<html>
<head>
<title> Carousel </title>



</head>
<body>


<div style="border: 1px solid black;  width = 190; height = 300;>
<div style ="border: 1px solid black; " id="imageStuff">

<figure><img src="./mongoose image.jpg" width=190; height =100;></img>
<figcaption><B> Mongoose </B></figcaption>
</figure>
</div>


<div style="border: 1px solid black;  background-color: blue;" width= 190; height=100;>





<button onClick="decreaseCount()"><</button>
<button onClick="changeCount(1)">1</button>
<button onClick="changeCount(2)">2</button>
<button onClick="changeCount(3)">3</button>
<button onClick="changeCount(4)">4</button>
<button onClick="changeCount(5)">5</button>
<button onClick="increaseCount()">></button>
</div>

</div>
<script>

var count = 1;
var images= [ "./mongoose image.jpg", "./fossa.jpg", "./ferret.png", "./civet.jpg", "./hyrax.jpg"];
var labels =["Mongoose", "Fossa", "Ferret", "Civet", "Hyrax"];

var changing = setInterval(moveImage, 3000);

function increaseCount()
{
changeCount(count+1)
}

function decreaseCount()
{
changeCount(count-1);
}


function moveImage()
{




increaseCount();

}

function changeCount(count2)
{
count = count2;

if (count < 1)
count = 5;

if (count > 5)
count = 1;

changeImage();

}

function changeImage()
{





document.getElementById("imageStuff").innerHTML = "<figure><img src='" + images[count-1] + "'  width=190 height = 100;></img>" +
"<figcaption><B>" + labels[count-1] + "</B></figcaption></figure>";





}

</script>

</body>
</html>

See fiddle for complete example

尝试使用javascript从按钮获取值

3 个答案: