Jquery on off первый клик не срабатывает при первом клике

Question

Я использую MVC 5 и Razor. Когда я нажимаю любую кнопку в первый раз, она не воспроизводится. Он будет играть на втором клике. Я попытался .off в конце кода, но это не сработало. Я хочу, чтобы он играл для первого нажатия на кнопку, а затем выключить. Сейчас для запуска трека и правильной работы с другими треками требуется два нажатия кнопки.

function play() {
//$(".song").unbind().click(function () {
$(".song").off('click').on('click', function () {

        //this is the url
        var url = $(this).attr("data-song");

    var audio = $("#myAudio")[0];

    if (audio.paused) {
        audio.src = url;
        audio.play();
    } else {
        audio.pause();
        audio.currentTime = 0;
    }


});

Вот мой HTML:

<table class="table" id="trackTable">
<tr>
    <th>

    </th>
    <th>
        @Html.DisplayNameFor(model => model.Title)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Genre)
    </th>

</tr>

@foreach (var item in Model)
{
    <tr>
        <td class="songRow">
            <a href="#"  class="song" data-song="@Url.Content(item.Path)"  onclick="play()" ><img src="~/Images/playpause.png" alt="playpause" id="playbutton"   /></a>

        </td>

        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Genre)
        </td>
        <td></td>
    </tr>
}

Answer 1

В этом вы впервые использовали функцию щелчка вместо использования выключения щелчка

Answer 2

Вы пробовали это?

$(".song").on('click', function () {
   $(this).off('click');

   // do the other stuff
}

Таким образом, по вашей ссылке можно нажать один раз, а затем click обработчик событий будет удален.