JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<script src="https://cloud.github.com/downloads/knockout/knockout/knockout-2.0.0.js"></script>
Working
<ul >
    <li>
<div class="prInput"> <input type="text" onkeypress="return isNumber(event)"  value="123" >%</div>
    <li>
    </ul>
Not Working
<ul data-bind="foreach: Item">
    <li>
<div class="prInput"> <input type="text" onkeypress="return isNumber(event)"  value="123" >%</div>
    <li>
    </ul>

CSS

.prInput {
        background-color: #fff;
        color: black;
        font-size: 12px;
        font-weight: normal;
        text-align: center;
    }

    th .prInput {
        border: 1px solid #cccccc;
    }

    .prBorder {
        border: 1px solid #cccccc;
    }


    .prInput input[type="text"] {
        border: none !important;
    }

JavaScript

//working
$(document).on("focus", ".prInput :text", null, function (ev) {
        $(this).parent(' .prInput ').addClass("prBorder");
    });

$(document).on("blur", ".prInput :text", null, function (ev) {
        $(this).parent(' .prInput ').removeClass("prBorder");
    });
//Not Working
$(".prInput :text").focus(function () {
    $(this).parent(' .prInput ').addClass("prBorder");
});

$(".prInput :text").blur(function () {
    $(this).parent(' .prInput ').removeClass("prBorder");
});

var Item = function(color) {
    this.color = String('color');
    
};
ko.applyBindings(function() {
    this.Item = ko.observableArray([
        new Item(),
        new Item(),
        new Item()
    ]);
}());